Cara Membuat Slider dengan W3.CSS
Jangan menilai buku dari sampulnya, karena Sahabat tak akan pernah memperoleh kesempatan bagi mencari tahu apa yang terdapat di dalamnya. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Slider dengan W3.CSS.
Bagi merancang Slider di web/blog kita pastinya banyak alternatif plugin yang telah disediakan oleh Slider Developer dengan banyak jenis animasi nya. Ada pun yang berbayar dan cuma-cuma bagi di dapatkan. Di bahasan kita kali ini mengenai Cara Merancang Slider dengan W3.CSS, kita akan merancang Slider dari framework memiliki tampilan yang dinamis yaitu W3.CSS.
Oke seketika saja, pertama-tama silahkan terlebih dahulu siapkan file index.html.
Kemudian, isi di bagian <head> link bagi 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 lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai Cara Merancang Slider dengan W3.CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
