Cara Mudah Membuat Slider Menggunakan Css W3C

Hallo balik lagi diartikel yang sama, dan masih membahas tentang w3c, nah pada artikel-artikel sebelumnya saya sudah menjelaskan tentang cara membuat menu dropdown, list, dan pop up modal dan kali ini saya ingin membahas tentang Cara Mudah Membuat Slider Menggunakan Css W3C,

, sudah bosen menggunakan bootstrap, beralih ke w3c hehe,, oke langsung saja kita membuat slider menggunakan w3c, cukup mudah untuk membuatnya tidak terlalu banyak script yang harus di tampilkan, oke berikut adalah 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
			  	</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

Jika sudah save dan jalankan, cukup mudah bukan? sekian tutorial tentang Cara Mudah Membuat Slider Menggunakan Css W3C, sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA

Cara Mudah Membuat Slider Menggunakan Css W3C

Kategori