Carousel
An accessible carousel component with motion transitions for cycling through content, supporting horizontal and vertical orientations, infinite looping, and ARIA region semantics.
Default
The default
Carousel renders with horizontal navigation and previous/next button controls. The component uses role="region" with aria-roledescription="carousel" for screen reader identification, and each CarouselItem is marked with role="group" and aria-roledescription="slide".Loop
Set
Loop to true to enable infinite cycling through items, wrapping from the last slide back to the first and vice versa. Without looping, the navigation buttons are automatically disabled when reaching the first or last slide.Vertical
Set
Orientation to CarouselOrientation.Vertical to stack slides vertically with up/down navigation. The navigation buttons automatically reposition above and below the carousel content. Use class="h-[80px]" on CarouselContent to constrain the visible height.