Carousel — Vanilla

Carousel with vanilla HTML. Use the same BEM structure; add your own script for prev/next or reuse the logic from the Astro component.

Carousel

Sliding content with previous/next controls and optional indicators. Structure uses carousel, carousel__viewport, carousel__track, and carousel__slide. JavaScript is required for prev/next and indicator clicks.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Live example (Astro component; same BEM)

Carousel

Markup

Use the same HTML structure. Add a script that listens for data-carousel-prev and data-carousel-next clicks and updates the track transform; see the Astro Carousel component script for reference.

html html 
<div class="carousel" role="region" aria-roledescription="carousel" aria-label="Slides" data-carousel>
  <div class="carousel__viewport" data-carousel-viewport>
    <div class="carousel__track" data-carousel-track>
      <div class="carousel__slide"><h4>Slide 1</h4><p>Content</p></div>
      <div class="carousel__slide"><h4>Slide 2</h4><p>Content</p></div>
      <div class="carousel__slide"><h4>Slide 3</h4><p>Content</p></div>
    </div>
  </div>
  <div class="carousel__controls">
    <button type="button" class="carousel__prev" aria-label="Previous slide" data-carousel-prev>...</button>
    <div class="carousel__indicators" role="tablist" aria-label="Slide indicators" data-carousel-indicators></div>
    <button type="button" class="carousel__next" aria-label="Next slide" data-carousel-next>...</button>
  </div>
</div>