bergabung di grup telegram kami

widget image slider

widget image slider
widget image slider

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

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[*/ 
var timeOut = 2e3,
    slideIndex = 0,
    autoOn = !0;

function autoSlides() {
    timeOut -= 20, 1 == autoOn && timeOut < 0 && showSlides(), setTimeout(autoSlides, 20)
}

function prevSlide() {
    timeOut = 2e3;
    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 > e.length && (slideIndex = 1), 0 == slideIndex && (slideIndex = 3), e[slideIndex - 1].style.display = "block", s[slideIndex - 1].className += " active"
}

function showSlides() {
    timeOut = 2e3;
    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 > e.length && (slideIndex = 1), e[slideIndex - 1].style.display = "block", s[slideIndex - 1].className += " active"
}
autoSlides();
/*]]>*/</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

Baca juga :

14 komentar



image quote pre code
  1. HELLOO
    1. hello
  2. 🥺🥺🥺 suka banget sama widgetnya. Terimakasih gan.
    1. sama2 mas
  3. makasih gan, akhirnya bisa bikin imageslider di homepage berkat tutorial ini
    1. sama2 gan
    2. boleh ngasih saran? kalo bisa untuk memuat slide nya dipisah pengaturan waktunya dengan pergantian setiap slide gambar. soalnya saya udh coba atur agar lebih cepat memuat diawal eh pergantiannya juga jadi ikut cepat

      atau dibuat lebih cepat saat memuat imageslider diawalnya agar tidak terlalu lama blank
    3. memuat gambarnya cepat atau lambatnya kan tergantung jaringan dan size gambar mas bukan di atur dari jsnya, semakin size gambar besar maka semakin lama pemuatannya juga dan balik lg ke jaringan masing2 jg
    4. oke siap min, sukses terus
  4. kalau pengen nampilkan image slide ini di dalam postingan gimana? langsung copy paste script nya ke dalam postingan saja kah?
    1. iya betul mas
  5. thanks bro i love you
  6. widgetnya sangat bermanfaat. kalau boleh scriptnya di update dong kalo imagenya di sorot atau hover, auto slidernya berhenti. biar bisa baca bannernya lebih lama.
  7. Thankyou bro, terbantu banget
© 2020 - Wendy Code