Create an image slideshow

Dive into how to create a simple and effective image slideshow using HTML, CSS, and JavaScript!

1st Step

To begin, let's use some HTML!

<div class="container">
  <div class="slides">
    <img src="https://zupimages.net/up/20/51/7ada.jpg" style="width:100%">
  </div>

  <div class="slides">
    <img src="https://zupimages.net/up/20/51/cdrk.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span>
</div>

We start by adding two images within separate <div> elements, each having the class "slides". Each image is defined with an <img> tag where the src attribute points to the image URL, and a style="width:100%" to ensure the images adapt to the container's width.

Next, we add two interactive buttons with the classes "prev" and "next", each linked to a JavaScript function plusSlides() via the onclick attribute. These buttons allow navigating between different slides by scrolling forward or backward.

Finally, we place two small circles at the bottom of the images to indicate the active slide. These circles are created using the <span> tag with the class "dot". Each circle is also linked to a JavaScript function currentSlide() which allows jumping directly to the corresponding slide when clicked.

2nd Step

Now, let's style the slides.

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

.slides {
  display: none;
}

Here, we style the .container class, which wraps around the two images and the two buttons.

3rd Step

Let's style the buttons.

.prev,
.next {
  cursor: pointer;
  color: white;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding: 16px;
  border-radius: 0 3px 3px 0;
  background: rgba(0, 0, 0, .5);
  transition: all .3s;
}

The classes .prev and .next are used to style the slideshow navigation buttons, allowing the user to move forward or backward through the slides. The code starts by setting the cursor to a pointer when hovering over the buttons, indicating they are clickable. The button text is white for better visibility against the dark background.

The buttons are positioned absolutely relative to their parent container, allowing precise placement within the container. They are vertically centered using top: 50%, then adjusted with transform: translate(0, -50%) to be perfectly aligned vertically.

An internal spacing of 16 pixels (padding: 16px) is added around the buttons, increasing the clickable area. The code also applies rounded corners to the buttons (border-radius: 0 3px 3px 0), creating a visually pleasing shape with rounded right corners. The button backgrounds are set to semi-transparent black (background: rgba(0, 0, 0, .5)), making them visible without completely obscuring the content behind them. Finally, a 0.3-second transition is applied to all state changes of the buttons (transition: all .3s), creating a smooth animation effect when these states change, such as on hover or click.

4th Step

Let's handle the buttons more specifically.

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

.prev:hover,
.next:hover {
  background: rgba(0, 0, 0, .8);
}

Here, we style the .next button on the right and add a transparency effect when the cursor hovers over it using the hover pseudo-class.

5th Step

Now, let's create the circles at the bottom of the slideshow.

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin: 10px 2px 0 2px;
  display: inline-block;
  background: #ddd;
  transition: all .3s;
}

.active,
.dot:hover {
  background: #717171;
}

The class .dot is used to style the small indicator circles located at the bottom of the slideshow, which allow the user to navigate directly to a specific slide. First, the mouse cursor changes to a pointer when hovering over these circles, signaling that they are interactive. The circles are defined with a height and width of 15 pixels, and are fully rounded using border-radius: 50%, giving them a perfectly circular shape.

Each circle is spaced apart from the others by a margin (margin: 10px 2px 0 2px), with more space at the top to separate them from the elements above. The circles are displayed inline with others using display: inline-block. Their background color is initially set to light gray (background: #ddd). A transition of 0.3 seconds is applied to all state changes (transition: all .3s), creating a smooth animation effect during interactions.

When a circle is active, meaning it corresponds to the currently displayed slide, or when it is hovered over by the mouse, its background color changes to a darker gray (background: #717171), visually indicating to the user which slide is selected or which circle is being pointed to.

6th Step

Let's move on to the JavaScript code.

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

The JavaScript will handle the slideshow functionality when the user clicks on the buttons.

7th Step

Let's continue by handling the function that will display the slides.

function showSlides(n) {
  let slides = document.getElementsByClassName('slides');
  let dots = document.getElementsByClassName('dot');
  
  if(n > slides.length) { slideIndex = 1 }
  
  if(n < 1 ) { slideIndex = slides.length }
  
  // Hide all slides
  for(let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  
  // Remove "active" from all dots
  for(let i = 0; i < dots.length; i++) {
    dots[i].classList.remove('active');
  }
  
  // Show the requested slide
  slides[slideIndex - 1].style.display = 'block';
  
  // Add "active" to the clicked dot
  dots[slideIndex - 1].classList.add('active');
}

The showSlides(n) function manages the slideshow display and updates the indicators (circles). It retrieves all the slides and dots, then adjusts the slideIndex to keep it within the limits of the number of slides. Next, it hides all slides and deactivates all dots. Finally, it displays the selected slide and activates the corresponding dot, visually marking the current slide.