DEV Community

loading...
Cover image for Automatic Image Slideshow Effect in HTML CSS & JavaScript

Automatic Image Slideshow Effect in HTML CSS & JavaScript

codingnepal profile image CodingNepal Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode
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%;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

Collapse
newman23777340 profile image
NEWman

How to stop the loop after last image is shown.

Forem Open with the Forem app