How to Add Image Slider to Blogger Homepage
/* Tutorial: https://youtu.be/2zf9U6cO7Xw */
/* Slider Demo:
/* CSS Code */
.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:#ff0033;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}}
<!--HTML Code-->
<b:if cond='data:view.isHomepage'></b:if> <!-- Only use this code if you are adding slider to Blogger Homepage -->
<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()'>❮</a>
<a class='next' onclick='showSlides()'>❯</a>
</div>
<div class='wrap-dot'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
// JavaScript Code
<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>
