Belajar Materialize #20 : Membuat Carousel Materialize

Belajar Materialize #20 : Membuat Carousel Materialize – Halo sahabat kodingin, berjumpa lagi dengan saya admin kodingin yang membahas seri panduan belajar Framework CSS yaitu Materialize. Tutorial Materialize bahasa Indonesia sangat mudah di pahami langkah demi langkah.

Membuat Carousel Materialize

Sebelum lebih lanjut belajar “membuat carousel materialize” sebaiknya pahami dulu pengertian carousel pada materialize.

Pengertian Carousel Materialize

Pernahkan anda menggunakan slide show pada power point ?

Ketika di geser akan membuat slide show otomatis.

Slide show di power point hampir mirip carousel pada materialize.

Carousel adalah sebuah slideshow yang menampiikan objek tertentu, baik teks maupun gambar yang bisa di geser ke kanan atau kekiri.

Carausel biasanya untuk menampilkan suatu branding unggulan, misalnya saja kita punya “website toko online”, nah kita dapat memanfaatkan carausel untuk barang produk unggulan.

Cara Membuat Carousel Materialize

Ketika menggunakan CSS secara manual banyak selector dan style yang harus kita buat , sehingga membutuhkan waktu yang lama untuk membuat carousel.

Dengan menggunakan materialize kita sangat mudah menggunakan carousel, dengan cara menambahkan selector css yang berupa class ke dalam elemen tag HTML kita.

Langsung saja mari kita bikin “cara menggunakan carousel materialize”.

Berikut ini contohnya kode materialize nya…

Perhatikan kode diatas, saya menggunakan class .carousel.carousel-slider agar elemen di dalam class tersebut dapat menjalankan slide show.

Namun harus di definiskan menggunakan Jquery juga, mengacu fungsi carousel yang telah di bikin oleh materialize.

Contoh di atas carousel bentuk teks saja, anda juga dapat menambahkan jumlah slide dan teksnya.

Sekarang kita lihat hasilnya.

Belajar Materialize #20 : Membuat Carousel Materialize
Cara Membuat Carousel Materialize

Perhatikan video di atas, terlihat sangat lembut slide show yang berberak. Bukan hanya dapat di geser dengan cursor saja, namun dapat menggunakan tombol yang berupa radio button untuk memindahkan carousel dari satu ke yang lainnya.

Cara Membuat Carousel Materialize dengan Gambar

Selanjutnya kita akan menggunakan gambar sebagai objek nya, kebanyakan orang juga dapat memberikan istilah dengan nama slider.

Kita dapat membuat gambar yang full / penuh maupun dengan gambar yang kecil. Semua itu tergantung kebutuhan kita maupun selera desain yang di inginkan.

Sebelum menggunakan carousel dengan gambar, langkah pertama anda harus menyiapkan gambar nya dulu. Sebagai contoh siapkan 3 gambar, baik gambar di lokal maupun secara online.

Berikut ini contoh menggunakan carousel materialize dengan gambar.

Perhatikan kode di atas, kode di atas merupakan bentuk carousel gambar dengan menggunakan gambar kecil. Terdapat 5 gambar sebagai contoh, anda dapat menambahkan gambar lebih dari 5.

Tentu saja kita tetap menggunakan jquery yang mengacu pada fungsi / method carouse.

Jika di jalankan maka hasilnya seperti ilustrasi di bawah ini.

Belajar Materialize #20 : Membuat Carousel Materialize
Cara Membuat Carousel Materialize dengan Gambar

Perhatikan gambar di atas, terdapat bentuk gambar yang keren. Terlihat seperti desain kaca yang indah.

Kita juga dapat membuat gambar penuh terdapat class di luarnya.

Dengan menambahkan nama method fullwitdh dan memberi nilai true, makan gambar akan terlihat besar. Perlu di ketahui kita tidak bisa menggunakan nama class .carousel lagi melainkan class dengan nama caraousel-slider yang di defiiniskan di kode javascript jquery.

Berikut ini contoh kode carousel dengan gambar yang besar.

Sekarang Lihat hasilnya.

Belajar Materialize #20 : Membuat Carousel Materialize
Cara Membuat Carousel Materialize dengan Gambar Kecil

Perhatikan gambar diatas, terlihat gambar penuh terhadap class .container, artinya gambar tersebut mempunyai lebar 100%.

Kesimpulan…

Untuk membuat carousel materialize dapat di lakukan dengan teks maupun slider gambar. Semua ini tergantung keinginan anda. Slider dengan gambar terdapat 2 jenis yaitu besar dan kecil.

Semua class untuk membungkus elemen pada carousel objek harus di definisikan ke dalam kode javascript Jquery, dimana akan mengacu pada method / fungsi carousel.

Baca Juga…

One comment

  1. […] Belajar Materialize #20 : Membuat Carousel Materialize […]

Leave a Reply