How to create a responsive slideshow with CSS and JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to create a responsive slideshow with the help of JavaScript and CSS.

A responsive slideshow or we can say a responsive image slider, or a responsive images slider with text is a visually attractive and interactive design element that take part your viewers on the website it will have from one or more images with a text overlay on it.

That is, it will display a series of images with a text on them. This also provide two arrow buttons suing which you can browse through the images (in both diresctions).

This is used to present a series of pictures in a web page consuming less space and, these images are easily accessable.

In this example, we are creating a webpage displaying the “responsive slideshow”.

Example.html

Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required the image, a responsive image slideshow.

<body>
   <!--HTML-->
   <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" />
         <div class="text">One</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" />
         <div class="text">Two</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" />
         <div class="text">Three</div>
      </div>
      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
   </div>
   <br/>

   <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>

Example.css

Add CSS style to give the size and effect for look. In this example, we are styling the slideshow.

<style>
   /* CSS */
   
   * {
      box-sizing: border-box;
   }
   
   body {
      font-family: Verdana, sans-serif;
      margin: 0;
   }
   
   .mySlides {
      display: none;
   }
   
   img {
      vertical-align: middle;
      width: 100%;
      height: 400px;
   }
   
   /* Slideshow container */
   
   .slideshow-container {
      max-width: 100vw;
      position: relative;
      margin-top: 5%;
   }
   
   /* Next & previous buttons */
   
   .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.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
   }
   
   /* Position the "next button" to the right */
   
   .next {
      right: 0;
      border-radius: 3px 0 0 3px;
   }
   
   /* On hover, add a black background color with a little bit see-through */
   
   .prev:hover,
   .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
   }
   
   /* Caption text */
   
   .text {
      color: #ff0000;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
   }
   
   /* Number text (1/3 etc) */
   
   .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
   }
   
   /* The dots/bullets/indicators */
   
   .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
   }
   
   .active,
   .dot:hover {
      background-color: #46dc5a;
   }
   
   /* Fading animation */
   
   .fade {
      animation-name: fade;
      animation-duration: 1.5s;
   }
   
   @keyframes fade {
      from {
         opacity: 0.4;
      }
      to {
         opacity: 1;
      }
   }
   
   /* On smaller screens, decrease text size */
   
   @media only screen and (max-width: 300px) {
      .prev,
      .next,
      .text {
         font-size: 11px;
      }
   }
</style>

Example.js

In this example, creating the slideshow with two buttons prev and next. And passing the length of the image in the JavaScript array to iterate the image from first to last, or we can do forward and backward by clicking the buttons.

<script>
   /* javascript Code */
   let slideIndex = 1; //set index at images first
   showSlides(slideIndex);
   
   function plusSlides(n) {
      showSlides((slideIndex += n));
   }
   
   function currentSlide(n) {
      showSlides((slideIndex = n));
   }
   
   function showSlides(n) {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("dot");
      if (n > slides.length) {
         slideIndex = 1;
      }
      if (n < 1) {
         slideIndex = slides.length;
      }
      for (i = 0; i < slides.length; i++) {
         slides[i].style.display = "none";
      }
      for (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>

Complete Example

Following is an example to create a responsive slideshow with the help of CSS, HTML, Javascript, and Media Query.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
   /* CSS */

   * {
      box-sizing: border-box;
   }

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

   .mySlides {
      display: none;
   }

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

   /* Slideshow container */

   .slideshow-container {
      max-width: 100vw;
      position: relative;
      margin-top: 5%;
   }

   /* Next & previous buttons */

   .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.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
   }

   /* Position the "next button" to the right */

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

   /* On hover, add a black background color with a little bit see-through */

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

   /* Caption text */

   .text {
      color: #ff0000;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
   }

   /* Number text (1/3 etc) */

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

   /* The dots/bullets/indicators */

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

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

   /* Fading animation */

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

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

   /* On smaller screens, decrease text size */

   @media only screen and (max-width: 300px) {
      .prev,
      .next,
      .text {
         font-size: 11px;
      }
   }
   </style>
</head>
<body>
   <!--HTML-->
   <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" />
         <div class="text">One</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" />
         <div class="text">Two</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" />
         <div class="text">Three</div>
      </div>
      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
   </div>
   <br />
   <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>
   /* javascript Code */
   let slideIndex = 1;
   showSlides(slideIndex);

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

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

   function showSlides(n) {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("dot");
      if (n > slides.length) {
         slideIndex = 1;
      }
      if (n < 1) {
         slideIndex = slides.length;
      }
      for (i = 0; i < slides.length; i++) {
         slides[i].style.display = "none";
      }
      for (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>