Carousel

A native, touch-friendly, CSS scroll-snap carousel supporting autoplay, looping, keyboard navigation, and mouse dragging.

Playground

Explore all carousel props interactively.

Uses CSS Scroll Snap for mobile touch, and native Pointer Events for desktop mouse dragging.

Enable infinite looping and timed autoplay. Pauses on hover automatically.

Focus the carousel and use Left/Right arrow keys.

activeIndex

The bound index of the currently active slide.

showPagination

Whether to show the dot pagination.

showArrows

Whether to show previous/next arrows.

autoplay

Autoplay interval in milliseconds. Omit to disable.

loop

Whether the carousel should wrap around when reaching the end.

keyboard

Whether to support Left/Right arrow keys for navigation.

color

Theme color for pagination/arrows.

glass

Glass surface density

frosted

Backdrop blur intensity

raised

Elevated with shadow

Because Carousel inherits the 'container' role from the UI Engine, it perfectly transforms into a glass pane when you need it.