Carousel
@/components/kamod-ui/carousel
Installation
Depends on `embla-carousel` and optional `embla-carousel-autoplay` (used when `autoplay` is set). Import primitives from `@/components/kamod-ui/carousel`.
pnpm add @kamod-ch/uiUsage
Wrap slides in CarouselContent; each slide is a CarouselItem. Place CarouselPrevious and CarouselNext as siblings of CarouselContent inside Carousel. Use opts for Embla options (align, loop, direction). Use setApi to read scrollSnapList, selectedScrollSnap, and events.
import { Carousel } from "@/components/kamod-ui/carousel";<Carousel />Demo
Card slides with previous and next controls (shadcn-style layout).
Sizes
Use basis utilities on CarouselItem; align slides with opts.align "start".
Spacing
Negative margin on CarouselContent and matching padding on items (shadcn spacing pattern).
Orientation
Vertical axis: set a fixed height (or h-full inside a sized parent) on CarouselContent, use min-h-0 on the viewport, basis + pt on items, and vertical padding on the wrapper so top/bottom arrows stay visible.
Options
opts forwards to Embla (e.g. loop). axis and direction are merged from orientation and dir.
API
setApi receives the Embla instance for slide counts and select events.
Autoplay
Use autoplay prop or pass plugins when you need full Embla plugin control (see core Carousel).
API Reference
Props, slots and variants for this component.
Carousel
Carousel component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| opts | EmblaOptionsType | undefined |
| orientation | "horizontal" | "vertical" | "horizontal" |
| setApi | (api: CarouselApi | null) => void | undefined |
| plugins | EmblaPluginType[] | undefined |
| autoplay | boolean | { delay?, stopOnInteraction? } | false |
| dir | "ltr" | "rtl" | undefined |
| children | CarouselContent, items, controls | required |
Accessibility Notes
Region is marked as carousel; items use group/slide roles. Pass label or aria-label on Carousel for an accessible name. When autoplay is enabled, add CarouselAutoplayPause so users can stop motion. Match reading direction with dir and opts.direction.