How to create Stylish Image Slider on blogger

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>