How do I create a CSS slideshow or carousel?

By /

A slideshow or carousel is a common and visually appealing way to display a series of images or content on a website. CSS provides a straightforward and flexible approach to creating slideshows without the need for JavaScript. In this comprehensive guide, we will explore different techniques to create a CSS slideshow or carousel, covering step-by-step instructions and various styles and effects to enhance your slideshow’s visual appeal.

1. Basic HTML Structure

To start creating a CSS slideshow, we need a basic HTML structure that includes the container to hold the slides and the individual slides themselves. Let’s set up the HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Slideshow</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slideshow-container">
    <div class="slide">
      <!-- Slide content goes here -->
    </div>
    <div class="slide">
      <!-- Slide content goes here -->
    </div>
    <!-- Add more slides as needed -->
  </div>
</body>
</html>

2. CSS Styles for Slideshow

Now, let’s add the CSS styles to create the slideshow effect. We will use CSS animations and transitions to achieve the sliding effect. For simplicity, we’ll use a fade-in and fade-out transition between slides:

/* CSS for slideshow */
.slideshow-container {
  width: 100%;
  height: 300px; /* Adjust the height as needed */
  overflow: hidden;
  position: relative;
}

.slide {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Add a fade-in/fade-out transition */
.slide {
  animation: fade-in-out 1.5s ease-in-out infinite;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

In this example, we set up the .slideshow-container as a container with hidden overflow to contain the slides. Each slide is given to the .slide class, which positions it absolutely within the container. The fade-in-out animation creates a smooth transition between the slides, making them appear and disappear with a fade-in and fade-out effect.

3. Adding Slides and Content

Now that we have set up the basic slideshow structure and styles, let’s add slides and content inside them. You can add as many slides as needed, and each slide can contain images, text, or any other content you want to display:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Slideshow</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slideshow-container">
    <div class="slide">
      <img src="slide1.jpg" alt="Slide 1">
    </div>
    <div class="slide">
      <img src="slide2.jpg" alt="Slide 2">
    </div>
    <div class="slide">
      <img src="slide3.jpg" alt="Slide 3">
    </div>
  </div>
</body>
</html>

4. Making the Slideshow Automatic

By default, the slideshow we created will transition between slides automatically. However, if you want to control the timing and pause the slideshow on user interaction, you can use CSS animations in combination with the animation-play-state property:

/* Add an animation delay and control animation-play-state */
.slideshow-container {
  /* ... other styles ... */
  animation: change-slide 12s infinite;
}

.slide {
  /* ... other styles ... */
  animation-play-state: paused;
}

@keyframes change-slide {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 80% {
    transform: translateX(-100%);
  }
}

In this example, we set an animation delay of 12 seconds, which means each slide will display for 12 seconds before transitioning to the next slide. We also set the animation-play-state of each slide to “paused,” effectively pausing the slideshow. You can use JavaScript to control the animation-play-state property and resume the slideshow on user interaction.

5. Adding Navigation Buttons

To improve user control, we can add navigation buttons to manually navigate through the slideshow. We’ll create “previous” and “next” buttons to move to the previous and next slides, respectively:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Slideshow</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slideshow-container">
    <!-- ... slides and content ... -->
    <button class="prev-btn" onclick="changeSlide(-1)">&#10094;</button>
    <button class="next-btn" onclick="changeSlide(1)">&#10095;</button>
  </div>
</body>
</html>
/* CSS for navigation buttons */
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

In this example, we added “previous” and “next” buttons with Unicode arrows as their content. The changeSlide function will handle the slide transition based on the direction provided as an argument.

6. Adding Indicator Dots

Indicator dots are a common feature in slideshows, showing users which slide is currently visible and providing easy navigation. Let’s add indicator dots for each slide:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Slideshow</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slideshow-container">
    <!-- ... slides and content ... -->
    <div class="dots-container">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>
  </div>
</body>
</html>
/* CSS for indicator dots */
.dots-container {
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #bbb;
  margin: 0 4px;
  cursor: pointer;
}

/* Style the active dot */
.active-dot {
  background-color: #007bff;
}

In this example, we added a div with the class dots-container, which holds the indicator dots. Each dot has an onclick attribute that triggers the currentSlide function to navigate to the corresponding slide.

7. JavaScript Functions

To handle the navigation between slides and update the indicator dots, we need some JavaScript functions. Here’s how to implement them:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Slideshow</title>
  <link rel="stylesheet" href="styles.css">
  <script>
    let currentSlideIndex = 1;

    function showSlide(index) {
      const slides = document.querySelectorAll('.slide');
      const dots = document.querySelectorAll('.dot');

      if (index > slides.length) {
        currentSlideIndex = 1;
      }

      if (index < 1) {
        currentSlideIndex = slides.length;
      }

      for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
        dots[i].classList.remove('active-dot');
      }

      slides[currentSlideIndex - 1].style.display = 'block';
      dots[currentSlideIndex - 1].classList.add('active-dot');
    }

    function changeSlide(n) {
      showSlide(currentSlideIndex += n);
    }

    function currentSlide(n) {
      showSlide(currentSlideIndex = n);
    }

    // Show the first slide on page load
    showSlide(currentSlideIndex);
  </script>
</head>
<body>
  <div class="slideshow-container">
    <!-- ... slides and content ... -->
    <!-- ... navigation buttons ... -->
    <!-- ... indicator dots ... -->
  </div>
</body>
</html>

In this JavaScript code, we created functions to show a specific slide (showSlide), navigate to the previous or next slide (changeSlide), and jump to a specific slide by index (currentSlide). The showSlide function handles displaying the appropriate slide and updating the indicator dots accordingly.

8. Adding CSS Transitions

While the slideshow is already functional, adding CSS transitions can enhance the sliding effect and create a smoother user experience:

/* Add CSS transitions */
.slide {
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active-slide {
  opacity: 1;
  z-index: 1;
}

In this example, we set the initial opacity of slides to 0 and added a transition on the opacity property with a duration of 1 second. The active-slide class is applied to the currently displayed slide, setting its opacity to 1, which makes it visible, and giving it a higher z-index to appear above other slides.

9. Adding CSS Slide Effects

To add different slide effects, you can customise the CSS animations and transitions. For example, instead of a fade-in and fade-out effect, you can create a slide-in effect from the left or right:

/* Slide-in effect from the right */
.slide {
  transform: translateX(100%);
  transition: transform 1s ease;
}

.slide.active-slide {
  transform: translateX(0);
}

With this CSS, each slide will slide in from the right when becoming the active slide.

10. Customisation and Styling

Feel free to customise the CSS and add your own styles to match your website’s design and theme. You can change the animation timings, add additional effects, or style the navigation buttons and indicator dots to better suit your project’s aesthetics.

11. Conclusion

Creating a CSS slideshow or carousel is a powerful way to display content in an interactive and visually appealing manner. By using CSS animations and transitions, you can achieve smooth slide transitions without the need for JavaScript. With the added flexibility of JavaScript, you can control the slideshow’s behaviour, navigation, and pause the automatic transition.

Whether you prefer a simple fade-in and fade-out effect or a more elaborate slide-in transition, CSS provides a wide range of options to create stunning and engageing slideshows. Experiment with different effects, styles, and layouts to find the perfect fit for your website’s needs, and enjoy the enhanced user experience that a well-designed slideshow can offer.

Continue your journey…

  1. How can I add a slideshow or image carousel to my WordPress site?
  2. How do I hide or show elements using CSS?
  3. How do I create a CSS animation or transition effect?
  4. How can I create a CSS flip card effect?
  5. How can I apply CSS styles to only the first or last element in a container?
  6. How do I style links and create link hover effects in CSS?
  7. How do I create a CSS class?
  8. How do I change the appearance of checkboxes and radio buttons with CSS?
  9. How do I create a multi-column layout with CSS?
  10. How can I apply CSS styles based on the user’s device type, like desktop or mobile?
Scroll to Top