How to Create Responsive Image Slider on Blogger

Hi Friends, Welcome to our The Web Trick Blog. Let us see how to set up the stylish responsive Image Slider Section on the blogger.

Usually this image slider is used on online store websites to promote new products so that they can be directly seen by users. But there are also personal blogs that use image sliders like this, usually used to promote articles.

What is an Image Slider?

Image Slider is one of the image showcase methods on blogs or websites. This Image Slider Section is Shows your Image Element on your Blogs. This Script is Specially Made for Blogger Websites.

This Section shows your three or more images on your blogger website one by one Slider View. show your post look like very Professionally.

How does it Work this Image Slider?

This Animated Image Slider shows your Images one by one. this image slider had two right and Left buttons. this button help to navigate the Image Slider.

This Image Slider was Automatically Navigated Every 3 Seconds to a Second Once. This Image Slider was helping to Shows your three or more images on Small Space.

For the demo, please click the button below, ok for those of you who want to try it, let's see how.

DEMO

How to Setup Image Slider Widget on Blogger

It's recommended to back up your old theme data before installing the new code

1. On Blogger dashboard, click Themes
2. On the Theme menu, click icon next to the Customize button
3. Click Edit HTML, you will be directed to the editing page.
4. Find any of these code ]]></b:skin> or </style> and copy the css below and paste it above the code ]]></b:skin> or </style>. This CSS code serves to display the image slide layout on the blog.

.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}}

5. Next copy all the html code and place it where you want to display the image slider widget, if you want to display it above the homepage, you can put it under </header> and wrap it with <b:if cond='data:view.isHomepage'></b:if> or you can add in Blogger post editor, please change to HTML View and Paste all the code that was copied earlier into your post.

<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>

6. Final step copy the javascript below and place it above the code </body> or <!--</body>--></body>

<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>

7. Save your theme by clicking icon at the top right of HTML editor

---

Final Words

If you enjoyed "How to Create a Stylish Image Slider on Blogger," please share it with your friends. This image slider was quite beneficial to the improvement of your blogger website.

Please follow our The Web Trick Blog, Telegram Channel, Youtube Channel, and Google News if you want more stuff like this.

You May Like These Posts:

Go to Link