Cara Mudah Membuat Slider Menggunakan Css W3C

Hallo balik lagi diartikel yang sama, dan masih membahas mengenai w3c, nah di artikel-artikel sebelumnya saya telah menjelaskan mengenai cara membangun fitur dropdown, list, dan pop up modal dan kali ini saya ingin membahas mengenai Cara Gampang Membangun Slider Menggunakan Css W3C,

, telah bosen menggunakan bootstrap, beralih ke w3c hehe,, oke seketika saja kita membangun slider menggunakan w3c, lumayan gampang bagi membuatnya tak terlalu banyak script yang mesti di tampilkan, oke berikut ialah scriptnya .

<link rel=stylesheet href=https://www.w3schools.com/w3css/4/w3.css> 
<div class=w3-content w3-display-container>
<div class=mySlides>
<img src=http://wowslider.com/sliders/demo-5/data/images/sur.jpg style=width: 100%>
<div class=w3-display-topright w3-container w3-padding-16 w3-black>
    Slides Pertama-tama
  </div>
</div>
<div class=mySlides>
<img src=https://www.metaslider.com/wp-content/uploads/2014/11/mountains1.jpg style=width: 100%>
<div class=w3-display-topleft w3-container w3-padding-16 w3-black>
    Slides Kedua
  </div>
</div>
<div class=mySlides>
<img src=http://wowslider.com/sliders/demo-11/data/images/krasivyi_korabl_-1024x768.jpg style=width: 100%>
<div class=w3-display-bottomright w3-container w3-padding-16 w3-black>
    Slides Ketiga
  </div>
</div>
</div>
<div class=w3-center>
<div class=w3-section>
  <button class=w3-button onclick=plusDivs(-1)>❮ Prev</button>
  <button class=w3-button onclick=plusDivs(1)>Next ❯</button>
</div>

  <button class=w3-button demo onclick=currentDiv(1)>1</button>
  <button class=w3-button demo onclick=currentDiv(2)>2</button>
  <button class=w3-button demo onclick=currentDiv(3)>3</button>
</div>
<script>
            var slideIndex = 1;
                showDivs(slideIndex);

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

                function currentDiv(n) {
                  showDivs(slideIndex = n);
                }

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

 

DEMO

Bila telah save dan jalankan, lumayan gampang bukan? sekianlah panduan mengenai Cara Gampang Membangun Slider Menggunakan Css W3C, hingga bertemu diartikel berikutnya dan hingga jumpa.

#KeepLearn

#IsmetMA

Sumber https://kursuswebsite.org