CleenUI · Media · Carousel

Carousel

Touch- and keyboard-friendly horizontal slider with autoplay, pagination dots, and custom slides.

storybook.cleenui.com
Open Storybook
Live preview

Interactive Carousel preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About Carousel

Carousel rotates through a set of slides. Supports touch swipe on mobile, mouse drag on desktop, and arrow-key navigation when focused. Autoplay can run with a configurable interval, pausing on hover or focus.

Slides can contain any JSX — images, cards, testimonials, hero panels. Pagination dots and prev/next arrows are themable; transition styles include slide, fade, and cross-dissolve.

When to use it

  • Homepage hero rotators.
  • Testimonial sliders.
  • Image galleries with multi-image previews.
  • Feature showcase rotators.

Common props

Prop
Type
Description
slides
ReactNode[]
Array of slide content.
autoplay
boolean
Auto-advance through slides.
intervalMs
number
Autoplay interval.
transition
"slide" | "fade"
Transition style.
showDots
boolean
Display pagination dots.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.