How to Create a Responsive Slideshow With CSS and JavaScript

Slideshows are a great way to showcase images, videos, or any other content in a captivating and interactive manner.

With the increasing usage of mobile devices, it’s essential to make the slideshows responsive to ensure that they look good and work seamlessly across various screen sizes.

In this tutorial, we’ll see how to create a responsive slideshow using CSS and JavaScript.

HTML Structure

The HTML structure of a slideshow typically consists of a wrapper, which contains multiple slides.

Each slide is represented by an element (e.g. a div) with a class that defines its styles. Here’s an example HTML structure:

<div class="slideshow-container">
  <div class="mySlides">
    <img src="img1.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="img2.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="img3.jpg" style="width:100%">
  </div>
</div>

CSS Styles

To create the styles for the slideshow, we’ll define the following:

The wrapper’s width and height
The slides’ width and height
The styles for the previous and next buttons

Here’s an example CSS code:

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

.mySlides {
display: none;
}

.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;
}

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

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

JavaScript

The JavaScript code will handle the following tasks:

Display the first slide on page load
Hide the previous and next buttons when the first or last slide is displayed
Show the next or previous slide when the respective button is clicked

Here’s an example JavaScript code:

var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var 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";
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];
if (slideIndex == 1) {
prev.style.display = "none";
} else {
prev.style.display = "block";
}
if (slideIndex == slides.length) {
next.style.display = "none";
} else {
next.style.display = "block";
}
}