widget image slider

widget image slider memiliki tombol next dan prev dan memiliki text caption

Hallo semua pada kesempatan kali ini saya akan membagikan widget image slider atau banner slider otomatis menggunakan javascript.

biasanya image slider ini di gunakan pada website toko online untuk mempromosikan produk barunya agar dapat langsung terlihat oleh user.

namun ada juga blog personal yang menggunakan image slider seperti ini, biasanya di pakai untuk mempromosikan artikel.

widget ini sudah auto slider dan juga memiliki tombol next dan prev dan memiliki text caption pada di bawah gambar.

untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin mencobanya mari simak caranya.

Widget Image Slider

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

.mySlides{display:none}
.mySlides img {vertical-align:middle;width:100%}
.wrap-dot{text-align:center;margin-top:10px}
.slideshow-container{max-width:1000px;position:relative;margin:auto}
.slideshow-container .prev,.slideshow-container .next{cursor:pointer;position:absolute;top:50%;padding:7px 15px;margin:-22px 5px 0 5px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:50%;user-select:none}
.slideshow-container .next{right:0}
.slideshow-container .prev:hover,.slideshow-container .next:hover{background-color:rgba(0,0,0,0.8)}
.slideshow-container .text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}
.wrap-dot .dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease}
.wrap-dot .dot.active{background-color:#f89000;width:30px;border-radius:20px}
.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}
@media only screen and (max-width:300px){.slideshow-container .prev,.slideshow-container .next,.slideshow-container .text{font-size:11px}}

lanjut salin html di bawah ini dan letakkan di mana kalian ingin menampilkan widget image slidernya, jika ingin menampilkan di atas homepage, bisa meletakkannya di bawah </header> dan di bungkus dengan <b:if cond='data:view.isHomepage'></b:if>

<div class='slideshow-container'>
<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_snow_wide.jpg'/>
  <div class='text'>Caption Text</div>
  </a>
</div>

<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_mountains_wide.jpg'/>
  <div class='text'>Caption Two</div>
  </a>
</div>

<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_nature_wide.jpg'/>
  <div class='text'>Caption Three</div>
  </a>
</div>
<a class='prev' onclick='prevSlide()'>&#10094;</a>
<a class='next' onclick='showSlides()'>&#10095;</a>
</div>

<div class='wrap-dot'>
  <span class='dot'></span>
  <span class='dot'></span>
  <span class='dot'></span>
</div>

lanjut salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah jangan lupa untuk klik simpan.

<script>/*<![CDATA[*/
// source code: www.w3schools.com modified by www.wendycode.com
// last updated 28-05-2023
var timeOut = 2000, // 2 seconds change image
    autoOn = true, // change it to false if you don't want automatic slides
    slideIndex = 0,
    slideTimer;
if (autoOn) {
   var slider = document.querySelector(".slideshow-container");
    slider.addEventListener("mouseenter", function() {
        clearTimeout(slideTimer);
        autoOn = false;
    });

    slider.addEventListener("touchstart", function() {
        clearTimeout(slideTimer);
        autoOn = false;
    });

    slider.addEventListener("mouseleave", function() {
        autoOn = true;
        autoSlides();
    });

    slider.addEventListener("touchend", function() {
        autoOn = true;
        autoSlides();
    });

    function autoSlides() {
        slideTimer = setTimeout(function() {

              showSlides();
              autoSlides();
            }
            , timeOut);
    }
     autoSlides();
} else {
     showSlides()
}

function prevSlide() {
      var e = document.getElementsByClassName("mySlides"),
        s = document.getElementsByClassName("dot");
       for (i = 0; i < e.length; i++) {
       e[i].style.display = "none";
       s[i].className = s[i].className.replace(" active", "");
    }
    slideIndex--;
    if (slideIndex < 0) {
        slideIndex = e.length - 1;
    }
    e[slideIndex].style.display = "block";
    s[slideIndex].className += " active";

}

function showSlides() {
    var e = document.getElementsByClassName("mySlides"),
       s = document.getElementsByClassName("dot");
    for (i = 0; i < e.length; i++) {
        e[i].style.display = "none";
        s[i].className = s[i].className.replace(" active", "");
     }
    slideIndex++;
    if (slideIndex >= e.length) {
       slideIndex = 0;
    }
    e[slideIndex].style.display = "block";
    s[slideIndex].className += " active";
}

slideIndex = -1;
showSlides();
/*]]>*/</script>

ok jadi sekian widget image slider yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Source code:
www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow