Cara Membuat Slider/ Carousel dengan Framework materialize.css

Hallo teman teman bertemu lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Cara membuat slider/carousel dengan materialize.css. teman teman mungkin sudah mengetahui yah apa itu slider pada website, website tanpa adanya slider mungkin akan terlihat kaku tidak menarik apalagi jika isi dari website tersebut hanya bertuliskan saja mungkin visitor akan cepat bosan melihatnya dan tidak akan betah berlama lama diwebsite kalian, oke langsung aja kali ini saya akan membantu teman teman dalam memecahkan masalah tersebut agar tampilan website teman teman tidak kaku.

Kali ini saya akan membuat slider dengan bantuan framework materialize.css, teman teman bisa mendownloadnya terlebih dahulu di sini. Oke kalau sudah buka filenya dan buat html baru lalu save dengan nama index.html lalu tuliskan scriptnya dibawah ini :

Script koneksi ke css materialize.css

<head>
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

Script body :

<div class="carousel">
    <a class="carousel-item" href="#one!"><img src="images/I.png"></a>
    <a class="carousel-item" href="#two!"><img src="images/s2.png"></a>
    <a class="carousel-item" href="#three!"><img src="images/m3.png"></a>
    <a class="carousel-item" href="#four!"><img src="images/e4.png"></a>
    <a class="carousel-item" href="#five!"><img src="images/t5.png"></a>
  </div>

Kalau sudah coba teman teman save dan jalankan di browser teman teman lihat tampilannya :

Berikut tampilannya :

Cukup mudah bukan ? sampai disini yah teman teman semoga artikel ini bermanfaat .

Terimakasih ..

#KeepLearn

#IsmetMA

Cara Membuat Slider/ Carousel dengan Framework materialize.css

Kategori