What is a carousel?

A carousel (slider) shows multiple images in the same area, allowing users to move between items with previous/next buttons.

Step 1: HTML structure

<div class="carousel-container">
  <div class="carousel-track">
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/3498db/ffffff?text=Image+1" alt="Image 1" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/2ecc71/ffffff?text=Image+2" alt="Image 2" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/e74c3c/ffffff?text=Image+3" alt="Image 3" />
    </div>
  </div>
  <button class="carousel-btn prev">&#10094;</button>
  <button class="carousel-btn next">&#10095;</button>
</div>

Step 2: CSS styling

.carousel-container { position: relative; overflow: hidden; max-width: 600px; }
.carousel-track { display: flex; transition: transform .4s ease; }
.carousel-slide { min-width: 100%; }
.carousel-slide img { width: 100%; display: block; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); }
.prev { left: 10px; }
.next { right: 10px; }

Step 3: JavaScript

const track = document.querySelector('.carousel-track');
const slides = document.querySelectorAll('.carousel-slide');
let index = 0;

function update() {
  track.style.transform = 'translateX(' + (-index * 100) + '%)';
}

document.querySelector('.next').addEventListener('click', () => {
  index = (index + 1) % slides.length;
  update();
});

document.querySelector('.prev').addEventListener('click', () => {
  index = (index - 1 + slides.length) % slides.length;
  update();
});

Next steps

• Dots indicators
• Autoplay
• Swipe support