Carousel Component

An accessible carousel for sliding content. Includes previous/next buttons and optional dot indicators. Uses role="region" and aria-roledescription="carousel" for screen readers.

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

Props

id (string, optional) — Unique id for the carousel (auto-generated if omitted)
showIndicators (boolean, optional) — Show dot indicators (default: true)
label (string, optional) — Accessible label for the region (default: "Carousel")
class (string, optional) — Additional CSS classes

Slots

Place one or more elements with class carousel__slide as direct children. Each slide is shown one at a time.

Live Example

Carousel

Slide 1

First slide content. Use previous/next or the indicators to navigate.

Slide 2

Second slide content.

Slide 3

Third slide content.

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React

---
import Carousel from '../components/astro/Carousel.astro';
---

<Carousel label="Slides">
  <div class="carousel__slide"><h4>Slide 1</h4><p>First slide content.</p></div>
  <div class="carousel__slide"><h4>Slide 2</h4><p>Second slide content.</p></div>
  <div class="carousel__slide"><h4>Slide 3</h4><p>Third slide content.</p></div>
</Carousel>

<!-- Rizzo CSS. Carousel needs JS for prev/next (see /docs/vanilla/components/carousel). -->
<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>First slide content.</p></div>
      <div class="carousel__slide"><h4>Slide 2</h4><p>Second slide content.</p></div>
      <div class="carousel__slide"><h4>Slide 3</h4><p>Third slide 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>

<script>
  import { Carousel } from '$lib/rizzo';
</script>

<Carousel label="Slides">
  <div class="carousel__slide"><h4>Slide 1</h4><p>First slide content.</p></div>
  <div class="carousel__slide"><h4>Slide 2</h4><p>Second slide content.</p></div>
  <div class="carousel__slide"><h4>Slide 3</h4><p>Third slide content.</p></div>
</Carousel>

<script setup>
import Carousel from '@/components/rizzo/Carousel.vue';
</script>

<template>
  <Carousel label="Slides">
    <div class="carousel__slide"><h4>Slide 1</h4><p>First slide content.</p></div>
    <div class="carousel__slide"><h4>Slide 2</h4><p>Second slide content.</p></div>
    <div class="carousel__slide"><h4>Slide 3</h4><p>Third slide content.</p></div>
  </Carousel>
</template>

import { Carousel } from './components/react';

<Carousel label="Slides">
  <div className="carousel__slide"><h4>Slide 1</h4><p>First slide content.</p></div>
  <div className="carousel__slide"><h4>Slide 2</h4><p>Second slide content.</p></div>
  <div className="carousel__slide"><h4>Slide 3</h4><p>Third slide content.</p></div>
</Carousel>

Other frameworks: Vanilla · Svelte · Vue · React

Carousel Component — Astro