Tutorials by Richard
How to create an automatic slideshow using HTML, CSS, and JS

How to create an automatic slideshow using HTML, CSS, and JS

This guide explains how to create an automatic image slideshow using HTML, CSS, and JavaScript.

Richard Orido's photo
Richard Orido
·

3 min read

Table of contents

What is an automatic slideshow?

An automatic slideshow changes the image it displays after a set period.

A common use case of an automatic slideshow is in the hero section of a website. However, it can be used in any other section as well.

Steps for creating an automatic slideshow

We'll create an automatic slideshow in the following steps:

  1. HTML code

  2. CSS code

  3. JavaScript code

HTML code

First, we write the HTML code to add the images.

<html>
  <body>
    <div class="image-slideshow">
      <div class="image fade">
      <img src="https://iili.io/HWdl3Al.md.jpg" alt="Mountain Top">
      </div>        
      <div class="image fade">
      <img src="https://iili.io/HWdlRDB.md.jpg" alt="Palm Trees">
      </div>        
      <div class="image fade">
      <img src="https://iili.io/HWdlWDN.md.jpg" alt="Neon Sign">
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Explanation

  • Line 3: We create a div for the images so that all images are contained within that div.

  • Lines 4–13: We create a separate div for each image. Within each, we then create the img tag, which contains the link and description for each separate image of the slideshow.

  • Line 14: We create the script tag just before the end of the body tag to link the HTML file to the JavaScript file.

CSS code

Next, we write the CSS rules that add styling to the slideshow.

* {
    box-sizing: border-box
}
.image-slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
img {
  width: 100%
}
.fade {
  animation-name: fade;
  animation-duration: 2s;
}
@keyframes fade {
  from {opacity: .5}
  to {opacity: 1}
}

Explanation

  • Lines 1–3: We add the padding and border in the total width and height of all elements.

  • Lines 4–8: We set the maximum width of the image-slideshow container. We center the container holding the images and position it relative to its parent element.

  • Lines 9–11: We create the img selector and give it a width of 100%.

  • Lines 12–15: We create a fading animation for the images when the image changes. We set the animation duration to be 2 seconds.

  • Lines 16–19: We define how the opacity of the images change during the animation using the @keyframes rule.

JavaScript code

Lastly, we write the JavaScript code to ensure that the images change automatically.

let index = 0;
displayImages();
function displayImages() {
  let i;
  const images = document.getElementsByClassName("image");
  for (i = 0; i < images.length; i++) {
    images[i].style.display = "none";
  }
  index++;
  if (index > images.length) {
    index = 1;
  }
  images[index-1].style.display = "block";
  setTimeout(displayImages, 2000); 
}

Explanation

  • Line 1: We define an index variable that lets us keep track of which image is currently being displayed.

  • Line 2: We declare the displayImages() function.

  • Line 3: We define the displayImages() function.

  • Line 5: We select all the elements with the image class and store them in an images array.

  • Lines 6–8: We loop through all the elements in images and hide them by setting their display style to “none.”

  • Lines 9–12: We increment index by one and make sure that it stays within the range of 3 (the number of images).

  • Line 13: We display only one image by setting its display style to “block.”

  • Line 14: We call the displayImages() function using the setTimeout() function, which will execute the function after a 2,000 millisecond (2 seconds) delay.

This article is also posted here.

HTML5CSSJavaScript