Carousel
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Carousel } from "@corew500/ui/carousel"
<Carousel>Content</Carousel>CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| opts | Partial<OptionsType> | — | — |
| plugins | CreatePluginType<LoosePluginType, {}>[] | — | — |
| orientation | enum | horizontal | — |
| setApi | (api: EmblaCarouselType) => void | — | — |
| loading | enum | false | Show skeleton loading state |
| loadingItems | number | 3 | Number of skeleton items to show when loading (default: 3) |
| loadingItemRenderer | (index: number) => ReactNode | — | Custom skeleton item renderer |
Accessibility
Keyboard Navigation
- Arrow keys navigate between slides.
Screen Readers
- - Uses `role="region"` with `aria-roledescription="carousel"`.
- Each slide has `role="group"` with `aria-roledescription="slide"`.
- Previous/Next buttons include screen reader text.
Localization
Translatable Content
- - Button labels ("Previous slide", "Next slide") can be customized via children.