Objective

By the end of this tutorial, you will have created a functional image slideshow using HTML, CSS, and JavaScript. This project will help you learn basic DOM manipulation, event handling, and CSS styling techniques.

Requirements

Basic knowledge of HTML, CSS, and JavaScript
A text editor (e.g., VS Code, Sublime Text)
A web browser (e.g., Chrome, Firefox)
A few images to use in your slideshow

Resources

Steps

Step 1: Set up HTML Structure

Create an index.html file for your slideshow's layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple JavaScript Slideshow</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slideshow-container">
    <div class="slide fade">
      <img src="img1.jpg" alt="Image 1">
    </div>
    <div class="slide fade">
      <img src="img2.jpg" alt="Image 2">
    </div>
    <div class="slide fade">
      <img src="img3.jpg" alt="Image 3">
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

  <script src="script.js"></script>
</body>
</html>

Step 2: Style the Slideshow with Css

Create a styles.css file to make your slideshow visually appealing


* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.slideshow-container {
  position: relative;
  max-width: 1000px;
  margin: auto;
}

.slide {
  display: none;
}

img {
  width: 100%;
  height: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev {
  left: -50px;
  border-radius: 3px 0 0 3px;
}

.next {
  right: -50px;
  border-radius: 0 3px 3px 0;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

Step 3: Add Javascript to Control the slideshow

Create a script.js file to add functionality to the slideshow.

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Show the slides
function showSlides(n) {
  let i;
  const slides = document.getElementsByClassName("slide");

  if (n > slides.length) {
    slideIndex = 1;
  }    
  if (n < 1) {
    slideIndex = slides.length;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }

  slides[slideIndex-1].style.display = "block";  
}

// Auto slideshow
setInterval(() => {
  plusSlides(1);
}, 3000);  // Change image every 3 seconds

Step 4: Run your Project

Open the index.html file in your browser.

Your slideshow should automatically play and allow manual navigation using the "next" and "previous" buttons.

Bonus

This tutorial expands on the basic JavaScript slideshow by adding captions for each image. You will learn how to include text captions that display along with each slide.

Step 1: Modify the HTML to Include Captions

Add a div with a class of caption inside each slide in your index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple JavaScript Slideshow</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slideshow-container">
    <div class="slide fade">
      <img src="img1.jpg" alt="Image 1">
      <div class="caption">Caption for Image 1</div>
    </div>
    <div class="slide fade">
      <img src="img2.jpg" alt="Image 2">
      <div class="caption">Caption for Image 2</div>
    </div>
    <div class="slide fade">
      <img src="img3.jpg" alt="Image 3">
      <div class="caption">Caption for Image 3</div>
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

  <script src="script.js"></script>
</body>
</html>

Step 2: Modify the HTML to Include Captions

In your styles.css file, add the following styles to style the captions:

/* Existing CSS */

.caption {
  color: #fff;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent background */
}

Step 3: Modify the HTML to Include Captions

Open the index.html file in your browser.
Your slideshow should now display captions below each image.