Hi Friends,Today I am going to provide you Codes for Slide Show with Automatic Image Slide Feature Too.

For Bloggers

First of all, Go to Themes and Edit HTML Button in your Blogger Dasboard.
Now Paste Below Code just below <head>.

<style>
.mySlides{display:none}img{max-width:100%;height:auto;border-radius:15px;box-shadow:0 10px 10px -5px rgba(0,0,0,0.22);vertical-align:middle}.slideshow-container{max-width:1000px;position:relative;margin:auto}.prev,.next{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-22px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:0 3px 3px 0;user-select:none}.next{right:0;border-radius:3px 0 0 3px}.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8)}.text{font-family:'Google Sans',sans-serif;color:#f2f2f2;font-size:15px;padding:30px 12px;position:absolute;bottom:8px;width:100%;text-align:center}.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0}.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}.active,.dot:hover{background-color:#717171}.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){.prev,.next,.text{font-size:11px}}.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}
</style>

Now Scroll bottom to Page and Find </body> .
Paste Below Code For Only SlideShow just Above it.


<script>
var slideIndex = 1;showSlides(slideIndex);function plusSlides(n){showSlides(slideIndex += n);}function currentSlide(n){showSlides(slideIndex = n);}function showSlides(n){var i;var slides = document.getElementsByClassName("mySlides");var dots = document.getElementsByClassName("dot");if (n > slides.length){slideIndex = 1;}if (n < 1){slideIndex = slides.length;}for (i = 0;i < slides.length;i++){slides[i].style.display = "none";}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";}
</script>

Paste Below Code if You Want it with Automatic Slide effect too.

<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,4000)};
  // Change image every 2 seconds
</script>

Now Save The Theme.
To Use SlideShow Use Below HTML Code.And Replace The image links with Your Image Links.

<div class="slideshow-container">

<div class="mySlides fade">
  <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  <div class="text ">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>