What tutorial do you want for the next article! Request Here!

How to Create Responsive Image Slider on Blogger

Guide to Responsive Slider Image Widget for Blogger.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
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.
  5. .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}}
  6. 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.
  7. <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>
    
  8. Final step copy the javascript below and place it above the code </body> or <!--</body>--></body>
  9. <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>
  10. 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:

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.