Special/Carousel
Carousel
A responsive slide carousel with arrow navigation and dot indicators. Slides transition on a sliding track, with no fixed pixel widths so it adapts to any container.
import { Carousel } from "@animui/ui"Basic
Slide 1
Slide 2
Slide 3
Slide 4
Autoplay, no dots
Auto 1
Auto 2
Auto 3
Auto 4
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode[] | — | Array of slide contents. |
autoPlay | boolean | false | Automatically advances to the next slide. |
autoPlayInterval | number | 5000 | Milliseconds between automatic slide transitions. |
showArrows | boolean | true | Shows the previous/next arrow buttons. |
showDots | boolean | true | Shows the dot indicators for direct slide navigation. |
className | string | — | Additional classes for the outer container (set height here). |
Accessibility
- ✓Arrow buttons have descriptive
aria-labels. - ✓Dot indicators expose
aria-currentfor the active slide. - ✓Arrows and dots are positioned with viewport-safe offsets so they never overflow on narrow screens.