Quantcast
Channel: Kursus Website Terbaik
Viewing all articles
Browse latest Browse all 2170

Membuat Carousel Dengan Materialize

$
0
0

Halo teman – teman, selamat datang kembali di website tips dan trik Dumet School. Pada artikel sebelumnya kita sudah membahas metode – metode yang ada pada framework materialize, dan pada kesempatan kali ini kita masih membahas sampai dengan Membuat Carousel Dengan Materialize. Setiap framework css umunya sudah menyediakan Carousel, namun banyak web design enggan menggunakannya. Mereka lebih memilih untuk menambahkan plugin sendiri untuk mendapatkan user friendly, namun pada framework satu ini yang telah menyediakan  juga Carousel  dengan hasil bisa dibilang user friendly. Jadi tanpa perlu lagi menggunakan plugin luar lagi, dan sebaiknya menggunakan plugin sesuai kebutuhan saja karena terlalu banyak plugin pada website juga akan berpengaruh loading nya saat di buka karena memanggil library – library yang berbeda.

Maka dari itu kita harus memaksimalkan framework yang kita pakai, agar plugin tambahan untuk keperluan yang lainnya. Carousel pada framework ini juga tidak kalah bagusnya, pada artikel Membuat Carousel Dengan Materialize ini ada beberapa tampilan yang telah di sediakan

Membuat Carousel Dengan Materialize

Bisa digunakan untuk product

Membuat Carousel Dengan Materialize

Yang di atas ini untuk slider nya

Membuat Carousel Dengan Materialize

Dan yang di atas ini bisa digunakan untuk slide text, untuk latihan kali ini kita akan membuat slider. Teman – teman siapkan text editornya dan file materialize nya lalu ketikkan script html nya seperti gambar ini bawah ini pada file index.html nya

Membuat Carousel Dengan Materialize

Dan masukkan image nya, teman – teman bisa menggunakan ukuran 700 x 350 px atau mungkin ukuran lainnya, jika sudah tambahkan script jQuery nya untuk mengaktifkan Carousel nya

<script type="text/javascript">
 $('.carousel.carousel-slider').carousel({fullWidth: true});
 </script>

Save dan jalankan pada browsernya, maka Carousel yang kita buat berhasil dengan menggunakan materialize. Sangat simple dan gampang sekali tidak perlu menggunakan plugin tambahan, hasilnya pun juga sudah responsive. Untuk script nya kita tambahkan class nya tampilan setiap device

Membuat Carousel Dengan Materialize

Dengan begitu slider akan responsive pada setiap device

Membuat Carousel Dengan Materialize

Bagaimana, cukup mudah bukan..??

Saya rasa sekian dulu pada artikel kali ini tentang Membuat Carousel Dengan Materialize kita jumpa kembali pada artikel selanjutnya yang masih membahas framework materialize. Kurang lebihnya mohon maaf, semoga bermanfaat. Terimakasih dan sampai jumpa.

The post Membuat Carousel Dengan Materialize appeared first on Kursus Website Terbaik.


Viewing all articles
Browse latest Browse all 2170

Trending Articles