How to create a responsive slideshow gallery with CSS and JavaScript?

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

A responsive slideshow will display a series of images with a text on them and two arrow buttons using which you can browse through the images. A responsive slideshow gallery or, a responsive image slider gallery is same as the responsive image slide show. It is a series of images whch you can browse through. But instead of arrow marks this provides image thumbnails, showing the preview of the images in the slide show in a small view at the bottom of the page.

Using this, you can browse through the images more easily, you can selct random images from the presented set using the thumbnails.

Following are the steps to be followed to create a responsive slideshow gallery. In this example, we are creating a webpage displaying the “responsive slideshow gallery”.

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 slideshow gallery.

<body>
   <h3 style="text-align: center">Slideshow Gallery</h3>
   <div class="container">
      <div class="imgSlides">
         <div class="numbertext">1 / 6</div>
         <img src="https://images.pexels.com/photos/1537979/pexels-photo-1537979.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">2 / 6</div>
         <img src="https://images.pexels.com/photos/59512/pexels-photo-59512.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">3 / 6</div>
         <img src="https://images.pexels.com/photos/2658459/pexels-photo-2658459.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">4 / 6</div>
         <img src="https://images.pexels.com/photos/24821/pexels-photo-24821.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">5 / 6</div>
         <img src="https://images.pexels.com/photos/5689662/pexels-photo-5689662.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">6 / 6</div>
         <img src="https://images.pexels.com/photos/9918913/pexels-photo-9918913.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
      <div class="caption-container">
         <p id="caption"></p>
      </div>
      <div class="row">
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/1537979/pexels-photo-1537979.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(1)" alt="One" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/59512/pexels-photo-59512.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(2)" alt="Two" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/2658459/pexels-photo-2658459.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(3)" alt="Three" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/24821/pexels-photo-24821.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(4)" alt="Four" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/5689662/pexels-photo-5689662.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(5)" alt="Five" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/9918913/pexels-photo-9918913.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(6)" alt="Six" />
         </div>
      </div>
   </div>

Example.css

Add CSS style to give the size and effect for a look. In this example, we are styling the slideshow and adding a hover effect whenever we hover on the image it will be clear.

<style>
   body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
   }

   * {
      box-sizing: border-box;
   }

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

   /* Position the image container */

   .container {
      position: relative;
   }

   /* Hide the images by default */

   .imgSlides {
      display: none;
   }

   .cursor {
      cursor: pointer;
   }

   /* Next & previous buttons */

   .prev,
   .next {
      cursor: pointer;
      position: absolute;
      top: 35%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-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);
   }

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

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

   /* Container for image text */

   .caption-container {
      text-align: center;
      background-color: #222;
      padding: 2px 16px;
      color: white;
   }

   .row:after {
      content: "";
      display: table;
      clear: both;
   }

   .row img {
      height: 130px;
   }

   /* Six columns side by side */

   .column {
      float: left;
      width: 16.66%;
   }

   /* Add a transparency effect for thumnbail images */

   .demo {
      opacity: 0.6;
   }

   .active,
   .demo:hover {
      opacity: 1;
   }
</style>

Example.js

Using JavaScript we can perform validation and the handle event on the page. In this example, creating the responsive slideshow gallery with two buttons prev and next.

And passing the length of the image in the JavaScript array to iterate through the image link from first to last, or if we clicked on the image then it will appear in full view.

<script>
   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("imgSlides");
      let dots = document.getElementsByClassName("demo");
      let captionText = document.getElementById("caption");
      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";
      captionText.innerHTML = dots[slideIndex - 1].alt;
   }
</script>

Complete Example

Following is complete example to create a responsive slideshow gallery using CSS, HTML, JavaScript, and Media Query.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
   }

   * {
      box-sizing: border-box;
   }

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

   /* Position the image container */

   .container {
      position: relative;
   }

   /* Hide the images by default */

   .imgSlides {
      display: none;
   }

   .cursor {
      cursor: pointer;
   }

   /* Next & previous buttons */

   .prev,
   .next {
      cursor: pointer;
      position: absolute;
      top: 35%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-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);
   }

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

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

   /* Container for image text */

   .caption-container {
      text-align: center;
      background-color: #222;
      padding: 2px 16px;
      color: white;
   }

   .row:after {
      content: "";
      display: table;
      clear: both;
   }

   .row img {
      height: 130px;
   }

   /* Six columns side by side */

   .column {
      float: left;
      width: 16.66%;
   }

   /* Add a transparency effect for thumnbail images */

   .demo {
      opacity: 0.6;
   }

   .active,
   .demo:hover {
      opacity: 1;
   }
</style>
<body>
   <h3 style="text-align: center">Slideshow Gallery</h3>
   <div class="container">
      <div class="imgSlides">
         <div class="numbertext">1 / 6</div>
         <img src="https://images.pexels.com/photos/1537979/pexels-photo-1537979.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">2 / 6</div>
         <img src="https://images.pexels.com/photos/59512/pexels-photo-59512.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">3 / 6</div>
         <img src="https://images.pexels.com/photos/2658459/pexels-photo-2658459.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">4 / 6</div>
         <img src="https://images.pexels.com/photos/24821/pexels-photo-24821.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">5 / 6</div>
         <img src="https://images.pexels.com/photos/5689662/pexels-photo-5689662.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <div class="imgSlides">
         <div class="numbertext">6 / 6</div>
         <img src="https://images.pexels.com/photos/9918913/pexels-photo-9918913.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" />
      </div>
      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
      <div class="caption-container">
         <p id="caption"></p>
      </div>
      <div class="row">
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/1537979/pexels-photo-1537979.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(1)" alt="One" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/59512/pexels-photo-59512.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(2)" alt="Two" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/2658459/pexels-photo-2658459.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(3)" alt="Three" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/24821/pexels-photo-24821.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(4)" alt="Four" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/5689662/pexels-photo-5689662.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(5)" alt="Five" />
         </div>
         <div class="column">
            <img class="demo cursor" src="https://images.pexels.com/photos/9918913/pexels-photo-9918913.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width: 100%" onclick="currentSlide(6)" alt="Six" />
         </div>
      </div>
   </div>
   <script>
   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("imgSlides");
      let dots = document.getElementsByClassName("demo");
      let captionText = document.getElementById("caption");
      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";
      captionText.innerHTML = dots[slideIndex - 1].alt;
   }
   </script>
</body>
</html>

Updated on: 19-Dec-2022

2K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements