DEV Community

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

Posted on • Updated on

Automatic Image Slideshow Effect in HTML CSS & JavaScript

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

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Image Slideshow Animation | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <div class="content">
      <div class="images">
        <img src="#">
        <img src="#">
        <img src="#">
        <img src="#">
        <img src="#">
      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";
        if(indexValue > img.length){indexValue = 1}
        img[indexValue -1].style.display = "block";

Enter fullscreen mode Exit fullscreen mode
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  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 -

Top comments (2)

newman23777340 profile image

How to stop the loop after last image is shown.

geachfadden profile image

How do I make an automatic slideshow in HTML? Voodoo love spells that work