Carousel

Used to cycle through a series of visual content within a container.

Examples

Use the CarouselIndicators component to render visual indicators that help users track the progress of the carousel and jump to specific slides.

Here's an example that uses an image thumbnail as a custom indicator.

Use the spacing prop to control the spacing between slides.

Spacing: 48px

Use the orientation prop to vertical to transform your carousel into a vertical slider.

Use the allowMouseDrag prop to enable mouse dragging on the carousel.

Click and drag to change slides

Pass the autoplay prop to the CarouselRoot component to make the carousel automatically move between slides.

autoplay={{ delay: 2000 }} or autoplay={true}