How to create a responsive slideshow with CSS and JavaScript?

In this article, we will create a responsive slideshow using JavaScript and CSS. A responsive slideshow is an interactive design element that displays a series of images with navigation controls, adapting to different screen sizes.

A responsive slideshow allows users to browse through multiple images using arrow buttons or dot indicators. It's commonly used to showcase content while conserving space on web pages.

HTML Structure

First, create the HTML structure with a container for slides, navigation arrows, and dot indicators:

<div class="slideshow-container">
   <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="https://images.pexels.com/photos/57652/pexels-photo-57652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Slide 1">
      <div class="text">Nature Scene</div>
   </div>
   
   <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Slide 2">
      <div class="text">Urban View</div>
   </div>
   
   <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="https://images.pexels.com/photos/811029/pexels-photo-811029.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Slide 3">
      <div class="text">Mountain Landscape</div>
   </div>
   
   <a class="prev" onclick="plusSlides(-1)">?</a>
   <a class="next" onclick="plusSlides(1)">?</a>
</div>

<div style="text-align: center">
   <span class="dot" onclick="currentSlide(1)"></span>
   <span class="dot" onclick="currentSlide(2)"></span>
   <span class="dot" onclick="currentSlide(3)"></span>
</div>

CSS Styling

Add CSS to style the slideshow container, images, navigation buttons, and make it responsive:

* {
   box-sizing: border-box;
}

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

.mySlides {
   display: none;
}

img {
   vertical-align: middle;
   width: 100%;
   height: 400px;
   object-fit: cover;
}

.slideshow-container {
   max-width: 100%;
   position: relative;
   margin: 20px auto;
}

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

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

.prev:hover, .next:hover {
   background-color: rgba(0, 0, 0, 0.8);
}

.text {
   color: #ffffff;
   font-size: 16px;
   padding: 8px 12px;
   position: absolute;
   bottom: 8px;
   width: 100%;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.6);
}

.numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
}

.dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 5px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.3s ease;
}

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

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

@keyframes fade {
   from { opacity: 0.4; }
   to { opacity: 1; }
}

@media only screen and (max-width: 600px) {
   .prev, .next, .text {
      font-size: 14px;
   }
   
   img {
      height: 250px;
   }
}

JavaScript Functionality

The JavaScript code handles slide navigation, automatic display initialization, and dot indicator updates:

let slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
   let slides = document.getElementsByClassName("mySlides");
   let dots = document.getElementsByClassName("dot");
   
   if (n > slides.length) {
      slideIndex = 1;
   }
   if (n < 1) {
      slideIndex = slides.length;
   }
   
   for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
   }
   
   for (let i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
   }
   
   slides[slideIndex - 1].style.display = "block";
   dots[slideIndex - 1].className += " active";
}

Complete Working Example

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
   * {
      box-sizing: border-box;
   }

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

   .mySlides {
      display: none;
   }

   img {
      vertical-align: middle;
      width: 100%;
      height: 400px;
      object-fit: cover;
   }

   .slideshow-container {
      max-width: 100%;
      position: relative;
      margin: 20px auto;
   }

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

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

   .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
   }

   .text {
      color: #ffffff;
      font-size: 16px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.6);
   }

   .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
   }

   .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 5px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.3s ease;
   }

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

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

   @keyframes fade {
      from { opacity: 0.4; }
      to { opacity: 1; }
   }

   @media only screen and (max-width: 600px) {
      .prev, .next, .text {
         font-size: 14px;
      }
      
      img {
         height: 250px;
      }
   }
   </style>
</head>
<body>
   <div class="slideshow-container">
      <div class="mySlides fade">
         <div class="numbertext">1 / 3</div>
         <img src="https://images.pexels.com/photos/57652/pexels-photo-57652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Nature">
         <div class="text">Nature Scene</div>
      </div>

      <div class="mySlides fade">
         <div class="numbertext">2 / 3</div>
         <img src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Urban">
         <div class="text">Urban View</div>
      </div>

      <div class="mySlides fade">
         <div class="numbertext">3 / 3</div>
         <img src="https://images.pexels.com/photos/811029/pexels-photo-811029.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Mountain">
         <div class="text">Mountain Landscape</div>
      </div>

      <a class="prev" onclick="plusSlides(-1)">?</a>
      <a class="next" onclick="plusSlides(1)">?</a>
   </div>

   <div style="text-align: center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
   </div>

   <script>
   let slideIndex = 1;
   showSlides(slideIndex);

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

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

   function showSlides(n) {
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("dot");
      
      if (n > slides.length) {
         slideIndex = 1;
      }
      if (n < 1) {
         slideIndex = slides.length;
      }
      
      for (let i = 0; i < slides.length; i++) {
         slides[i].style.display = "none";
      }
      
      for (let i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" active", "");
      }
      
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " active";
   }
   </script>
</body>
</html>

Key Features

This responsive slideshow includes:

• Navigation arrows - Click left/right arrows to browse slides
• Dot indicators - Click dots to jump to specific slides
• Fade animation - Smooth transitions between slides
• Responsive design - Adapts to different screen sizes
• Overlay text - Captions and slide numbers

Conclusion

This responsive slideshow combines HTML structure, CSS styling, and JavaScript functionality to create an interactive image gallery. The design automatically adapts to different screen sizes while providing intuitive navigation controls for users.