Automatic Image Slideshow Effect in HTML CSS & JavaScript

#javascript #imageslider #imageslideshow #slideshow

I'm sure that you have seen the Image Slideshow Effect on many websites. A slide show is a presentation of a series of still images on a projection screen or electronic display device, typically in a prearranged sequence. The changes of the images may be automatic and at regular intervals or they may be manually controlled by a presenter or the viewer.

Today in this blog I'll share the image slideshow effect using javascript. In this program, there are five images, and these images automatically change after a certain period. I used JavaScript to change the image after a certain time interval.

You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes because you won't get images if you copy the codes. Click here to download code files.

You might like this:

Image Slider with Controls
Animated Slider Blog UI Card
Responsive Owl-carousel Slider
Image Clip Animation with Sliders

HTML CODE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Image Slideshow Animation | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="content">
      <div class="images">
        <img src="#">
        <img src="#">
        <img src="#">
        <img src="#">
        <img src="#">
      </div>
</div>
<script>
      var indexValue = 0;
      function slideShow(){
        setTimeout(slideShow, 2500);
        var x;
        const img = document.querySelectorAll("img");
        for(x = 0; x < img.length; x++){
          img[x].style.display = "none";
        }
        indexValue++;
        if(indexValue > img.length){indexValue = 1}
        img[indexValue -1].style.display = "block";
      }
      slideShow();
    </script>

  </body>
</html>

CSS CODE:

body{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.content{
  height: 400px;
  width: 750px;
  overflow: hidden;
  box-shadow: 1px 1px 15px rgba(0,0,0,0.4);
}
.content .images{
  height: 100%;
  width: 100%;
}
.images img{
  height: 100%;
  width: 100%;
}

Don't forget to visit our Website for more related blogs/tutorials - https://www.codingnepalweb.com/