Carousel
Sliding content with previous/next controls and optional dot indicators; keyboard and screen reader friendly
Same BEM classes and behavior as Astro, Svelte, and Vue.
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.
Live examples
React
Slide 1
First slide content.
Slide 2
Second slide content.
Slide 3
Third slide content.
Usage
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: Astro · Vanilla · Svelte · Vue
npm 
pnpm 
yarn 
bun