Ini adalah lanjutan dari artikel tentang membuat carousel dengan materialize. Namun pada artikel ini masih tetap membahas mengenai slider carousel dari materialize, tetapi tampilanya sedikit berbeda. Yaitu dengan slider full image. Yap benar, pada percobaan kali ini kita akan membuat carousel full dengan Materialize. Untuk membuat fungsi carousel ini tentunya teman-teman harus sudah mengerti tentang cara menggunakan framework materialize.

Untuk penggunaanya tidak terlalu sulit, yang penting kalian harus sering-sering membaca dokumentasi yang sudah disediakan oleh materialize pada situs resminya. Oke langsung saja kita mulai, pertama-tama kalian bisa salin contoh code dibawah ini.

carousel.html

simpan code diatas dengan format html.

Untuk penjelasan bagaimana slider ini berjalan karena materialize sendiri sudah menyiapkan fungsi tersebut, yang perlu kalian ketahui adalah bagian-bagian penting agar fungsi tersebut dapat berjalan dengan lancar.

Seperti misalnya code dibawah ini adalah untuk gambar yang akan dibuat menjadi slider carousel.

Lalu script untuk memberikan efek slider carousel dengan tipe full width.

Dan jangan lupa untuk menyisipkan tiga link dibawah ini dalam tag <head> </head> agar fungsi dari materialize berjalan dengan lancar ya.

Maka hasilnya akan seperti ini.

Slider yang muncul adalah slider dengan gambar full, jadi pergantian gambarnya full satu gambar sehingga akan terlihat lebih luas untuk slidernya.

Dengan carousel dari materialize ini tentunya kalian bisa modifikasi sesuai dengan bentuk dan posisi mana yang kalian inginkan untuk mempercantik dan memberikan informasi lebih pada website kalian.

Mudah bukan ?

Sekian pembahasan mengenai cara membuat carousel full dengan Materialize. Semoga bermanfaat untuk kalian semua ya.