Mushilu-San UI Carousel
A set of slides shown one at a time, with previous and next controls and dots.
Selector: mui-carousel
import { Carousel, CarouselContent, CarouselItem, CarouselPrev, CarouselNext, CarouselDots } from '@mushilu-san/ui/data-display';Loading example…
Overview
mui-carousel-content. active is a two-way index of the visible slide, loop wraps from the last slide to the first, and autoPlay advances every N milliseconds.
aria-roledescription="carousel".
When to use
Featured items or a hero banner with a few slides. A gallery where users flip through the same kind of content.
When not to use
Content the user must see in full. Auto-advancing slides are easy to miss. Many items to scan. Use a grid. Use Grid instead.
Guidelines
Do
Keep auto-play off unless the content is decorative, or give users a pause control. Give each slide a meaningful heading.
Don't
Do not put the only copy of important information in a carousel.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | region | aria-roledescription="carousel" and a label (default "Carousel"). |
slide | group | aria-roledescription="slide". |
dots | tablist | aria-selected for the visible slide. |
Keyboard
| Keys | Action |
|---|---|
| ArrowLeftArrowRight | |
| TabShiftTab |
Avoid auto-play for content users need to read. If you use it, give users a way to pause.
API
Carousel
| Name | Type | Default | Description |
|---|---|---|---|
loop | boolean | false | Wraps from the last slide to the first and back. Default `false`. Accepts attribute presence, e.g. <… loop>. |
autoPlay | number | 0 | Advances to the next slide every N milliseconds. `0` turns auto-play off. Default `0`. |
label | string | 'Carousel' | Accessible name of the carousel region. Default `Carousel`. |
| Name | Type | Default | Description |
|---|---|---|---|
active | number | 0 | Index of the visible slide, starting at 0. Two-way bindable with `[(active)]`. |
CSS parts
::part(root)
CarouselContent
CSS parts
::part(content)
CarouselItem
CSS parts
::part(item)
CarouselPrev
CSS parts
::part(prev)
CarouselNext
CSS parts
::part(next)
CarouselDots
CSS parts
::part(dot)::part(dots)
Tokens
--mui-color-surface--mui-color-border--mui-color-primary--mui-color-focus-ring--mui-touch-target