How to create Stylish Image Slider on blogger - Pixabin Official

Hi Friends, Welcome to our Pixabin Blog. Let us see how to set up the Stylish image Slider Section on the blogger. 

this image slider is a very Professional Quality Element. this Image Slider Was gives an Animated Look to your Blog.

How to Create this Image Slider on blogger? That is very simple to create and it's a very easy method without any Mistakes.  

We think this Image Slider Section is very Useful to you. and, it helps to design your Blog Website

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 Section shows your three or more images on your blogger website one by one Slider View. show your post look like very Professionally. 

This Script is Specially Made for Blogger Websites.

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.

Pros and Cons of Image Slider

This Image Slider is Come with Some Pro and Cons

Pros

• Gives Professional Look
• Add many Images on one Element

Cons

• Take a small time to this Element

How to setup Stylish Image Slider on blogger

1. Go to your Blogger Dashboard

2. Next, go to the Post section and Copy the Below Html Script

3. And, Paste you wanted a place on your blog post

<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:5px 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:#00ff00;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}} </style>




<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>
  
  <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> 
  <span class="dot"></span> 
</div>


<script>
var timeOut = 2000;
var slideIndex = 0;
var autoOn = true;

autoSlides();

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

function prevSlide() {
  timeOut = 2000;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slideIndex--;
  
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  if (slideIndex == 0) {
    slideIndex = 4
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
        }
  
function showSlides() {
  timeOut = 2000;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slideIndex++;
  
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}
</script>

4. Paste your Image URL on "src=" Section

5. Paste your link on "href='#'" Section

Demo

Caption Text

Caption Two

Caption Three

Caption Four

❮ ❯

Final Words

If you like this post "How to create Stylish Image Slider on blogger ". This Image slider was absolutely helping to improve your blogger website. 

If you want more information like this Please do follow on our Pixabin Blog Telegram Channel, Youtube Channel, and Google News.