How to create carousel in html

HtmlHow-ToBeginner · 4 min read

How to Create a Carousel in HTML: Simple Steps and Example

To create a carousel in HTML, use a container with multiple items inside and control their visibility with CSS and JavaScript. You can add navigation buttons to move between items and use simple scripts to show one item at a time.

📐

Syntax

A basic carousel structure includes a container element holding multiple slide items. Navigation buttons allow moving between slides. JavaScript changes which slide is visible by adding or removing CSS classes.

<div class="carousel">: Main container for the carousel.
<div class="slide">: Each slide item inside the carousel.
<button>: Controls to move slides left or right.
CSS: Used to hide all slides except the active one.
JavaScript: Changes the active slide on button clicks.

html

<div class="carousel">
  <div class="slide active">Slide 1 content</div>
  <div class="slide">Slide 2 content</div>
  <div class="slide">Slide 3 content</div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

💻

Example

This example shows a simple image carousel with three images. Only one image is visible at a time. The "Previous" and "Next" buttons let you cycle through the images smoothly.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Carousel</title>
<style>
  .carousel {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
    margin: 20px auto;
    border: 2px solid #ccc;
    border-radius: 8px;
  }
  .slide {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .slide.active {
    display: block;
  }
  button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
  }
  .prev {
    left: 10px;
  }
  .next {
    right: 10px;
  }
</style>
</head>
<body>

<div class="carousel" aria-label="Image Carousel">
  <img src="https://via.placeholder.com/300x200?text=Slide+1" alt="Slide 1" class="slide active" />
  <img src="https://via.placeholder.com/300x200?text=Slide+2" alt="Slide 2" class="slide" />
  <img src="https://via.placeholder.com/300x200?text=Slide+3" alt="Slide 3" class="slide" />
  <button class="prev" aria-label="Previous Slide">&#10094;</button>
  <button class="next" aria-label="Next Slide">&#10095;</button>
</div>

<script>
  const slides = document.querySelectorAll('.slide');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');
  let currentIndex = 0;

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.toggle('active', i === index);
    });
  }

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
  });

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
  });
</script>

</body>
</html>

Output

A 300x200 pixel box showing one image at a time with left and right arrow buttons to switch images.

⚠️

Common Pitfalls

Common mistakes when creating carousels include:

Not hiding inactive slides, causing all slides to show at once.
Forgetting to update the active slide index correctly, which breaks navigation.
Missing alt text on images, hurting accessibility.
Not using semantic HTML or ARIA labels, making it hard for keyboard users.

Always test your carousel with keyboard navigation and screen readers.

html

<!-- Wrong: All slides visible -->
<div class="carousel">
  <img src="slide1.jpg" class="slide" alt="Slide 1" />
  <img src="slide2.jpg" class="slide" alt="Slide 2" />
  <img src="slide3.jpg" class="slide" alt="Slide 3" />
</div>

<!-- Right: Only one slide visible -->
<style>
  .slide { display: none; }
  .slide.active { display: block; }
</style>

📊

Quick Reference

Use a container with multiple slide elements inside.
Hide all slides except the active one using CSS.
Use JavaScript to change the active slide on button clicks.
Include alt text for images for accessibility.
Add ARIA labels to buttons for screen readers.

✅

Key Takeaways

Create a container with multiple slides and show only one at a time using CSS classes.

Use JavaScript to update which slide is active when navigation buttons are clicked.

Always include alt text on images and ARIA labels on controls for accessibility.

Test your carousel with keyboard navigation to ensure usability for all users.