Materialize adalah sebuah framework CSS yang cukup populer selain Bootstrap yang mungkin kalian semua sudah sering mendengar namanya. Materialize sebagai framework tentu menyediakan kebutuhan-kebutuhan seputar rancangan tampilan website yang bagus dan nyaman, cocok untuk semua jenis browser. Salah satu fitur yang disediakan materialize adalah slide show. Website dengan slide show adalah hal yang umum. Karena dengan slide show pengunjung menjadi lebih tertarik karena ada kesan website yang interaksif.

Berbicara tentang slide show, pada artikel kali ini kita akan mencoba membuat carousel dengan Materialize. Carousel ini adalah istilah untuk membuat slide show dalam website. Karena kita menggunakan framework maka kita tidak perlu membuat ulang dari awal. Kita cukup baca dokumentasi dari materialize tentang apa saja yang diperlukan untuk membuat slide show.

Oke langsung saja kita mulai ya, kalian bisa salin code dibawah ini.

carousel.html

Setelah sudah kalian bisa simpan file tersebut dengan format html, kemudian untuk tahu apakah berhasil atau tidak maka kalian harus buka file tersebut pada browser kalian.

Jika berhasil maka tampilanya akan seperti ini.

Saat gambar pada slide show tersebut kalian geser dengan mouse, maka ada efek seperti memutar foto. Urutan fotonya pun akan berubah sesuai apa yang kita pilih.

Hal ini karena kita menggunakan kelas carousel pada code ini.

Pada div tersebut kita sisipkan class carousel dimana class tersebut adalah untuk memberikan efek slide show yang memang sudah bawaan dari materialize, tinggal kita panggil saja class tersebut pada script jquery seperti ini.

Namun kalian jangan lupa untuk menyipkan file css dan jquery dibawah ini pada tag head kalian ya.

karena jika file diatas tidak ada maka perintah carousel tidak akan berjalan.

Mudah bukan ?

Sekian pembahasan mengenai cara membuat carousel dengan Materialize. Semoga bermanfaat.