Carousel

Scroll-snap carousel with prev/next controls, over embla.

Carousel is an embla-powered carousel: drag/scroll-snap content, arrow controls that disable at the ends, horizontal or vertical.

Installation

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@iammikz/srui";

Usage

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide sizing

Slides size themselves via the className on each CarouselItem — the track is a flex row, so basis-* utilities decide how many slides share a view:

{/* one slide per view */}
<CarouselItem className="basis-full">…</CarouselItem>

{/* two per view, four from the sm breakpoint up */}
<CarouselItem className="basis-1/2 sm:basis-1/4">…</CarouselItem>

Exports

Export	Notes
`Carousel`	`orientation="horizontal" \| "vertical"`, `opts` (embla options), `setApi`
`CarouselContent` / `CarouselItem`	The track and slides — size slides via `className` (`basis-1/3` etc.)
`CarouselPrevious` / `CarouselNext`	Round arrow buttons; auto-disabled at the ends
`useCarousel()`	`{ api, scrollPrev, scrollNext, canScrollPrev, canScrollNext, orientation }`

Accessibility

The region is aria-roledescription="carousel", slides are role="group"/aria-roledescription="slide", and arrow keys scroll when the carousel itself is focused.