CREATE CUSTOM HTML & CSS IMAGE SLIDER OPTION ON BLOGGER

Welcome , Today in this article I will show you, How to embed image Slider option To your blogs.

WHY AUTOMATIC IMAGE SLIDER

Hello blogger, Some Blogger themes are Provide their auto image Slider option to by default. This is a beautiful feature to any themes but when you using this type of themes, your blogs is beat of slow.
So we recommend, use lightweight themes and use Custom image Slider option and they are definitely beautiful to your blog and much better performance to your blog.


UPLOAD BEAUTIFUL IMAGE ON SLIDER

Friends, You have need to upload beautiful image for image slider. So friends, upload your business / Professional attractive image on google drive or You can upload image on blogger.

GOOGLE DRIVE

open google drive >> upload image >> Send >> Get Shareable link

GOOGLE BLOGGER

blogger >> create new post >> upload image >> Right click on the image and Get link >> Copy



EDIT HTML AND CSS CODE ON IMAGE SLIDER.

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
/* Number text (1/4 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
  background-color: #717171;
}
/* Fading animation */
.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}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>
<h2>Slideshow</h2>
<p>Change image every 3 seconds:</p>
<div class=”slideshow-container”>
<div class=”mySlides fade”>
  <div class=”numbertext”>1 / 5</div>
  <img src=”1.URL” style=”width:100%”>
  <div class=”text”>Caption Text</div>
</div>
<div class=”mySlides fade”>
  <div class=”numbertext”>2 / 5</div>
  <img src=”2.URL” style=”width:100%”>
  <div class=”text”>Caption Two</div>
</div>
<div class=”mySlides fade”>
  <div class=”numbertext”>3 / 5</div>
  <img src=”3.URL” style=”width:100%”>
  <div class=”text”>Caption Three</div>
</div>
<div class=”mySlides fade”>
  <div class=”numbertext”>4 / 5</div>
  <img src=”4.URL” style=”width:100%”>
  <div class=”text”>Caption Four</div>
</div>
<div class=”mySlides fade”>
  <div class=”numbertext”>5 / 5</div>
  <img src=”5. URL” style=”width:100%”>
  <div class=”text”>Caption Four</div>
</div>
</div>
<br>
<div style=”text-align:center”>
  <span class=”dot”></span>
  <span class=”dot”></span>
  <span class=”dot”></span>
  <span class=”dot”></span>
  <span class=”dot”></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
    var i;
    var slides = document.getElementsByClassName(“mySlides”);
    var dots = document.getElementsByClassName(“dot”);
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = “none”; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}   
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(” active”, “”);
    }
    slides[slideIndex-1].style.display = “block”; 
    dots[slideIndex-1].className += ” active”;
    setTimeout(showSlides, 3000); // Change image every 3 seconds
}
</script>
</body>
</html>

Copy this code and paste on notepad. Now Edit
on highlighted area on ex. 1.url, 2.url etc. and replace your photos url,who are you upload on google drive/blogger.
You can edit on Image sliding time on mili-second and also you can add on many sliding image, use maximum 5 images (recommend).



SET-UP HTML IMAGE SLIDER

If you want to set image Slider on blogger Home page, Then

Open Blogger >> Themes >> Edit html >> Press on CTRL + F >> Enter on "<head>" >> Paste code on the below.

If you want to show on Particular page, Then

Open Blogger >> Create page >> Select on html option >> Paste the code, where you want to show slider images.
So Guys Now Refresh your blogs and Show that beautiful image Slider.

Thanks for reading my articles, Hopefully this article is helpful to you. Rate our blog and big thank you.