join grup whatsapp Join

widget image slider

widget image slider widget ini sudah auto slider dan juga memiliki tombol next dan prev dan memiliki text caption pada di bawah gambar
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 :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

Posting Komentar



image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english