Cara Membuat Slider dengan W3.CSS

Jangan menilai buku dari sampulnya, karena Anda tidak akan pernah mendapatkan kesempatan untuk mencari tahu apa yang ada di dalamnya. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Slider dengan W3.CSS.

Untuk membuat Slider pada web/blog kita tentunya banyak pilihan plugin yang sudah disediakan oleh Slider Developer dengan banyak jenis animasi nya. Ada juga yang berbayar dan gratis untuk di dapatkan. Pada bahasan kita kali ini tentang Cara Membuat Slider dengan W3.CSS, kita akan membuat Slider dari framework responsive yaitu W3.CSS.

Oke langsung saja, pertama-tama silahkan terlebih dahulu siapkan file index.html.

Kemudian, isi di bagian <head> link untuk menghubungkan HTML kita dengan library CSS dari W3.CSS nya.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Setelah itu, isi di bagian <body> tag-tag seperti gambar di bawah.

<h2 class="w3-center">Manual Slider</h2>

<div class="w3-content" style="max-width:800px;position:relative">

<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>

</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>

Bagaimana teman-teman cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Slider dengan W3.CSS.

Semoga bermanfaat, terima kasih

Kategori