# Carousel

Horizontal (or vertical) scroller built on Embla Carousel. Used for photo galleries, onboarding card stacks, and any "swipe through a row" UX. Detects `[dir="rtl"]` automatically and forwards the right axis direction to Embla.

[View examples](https://marsam.rahhal.app/components/carousel) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/carousel`

**Category:** `surfaces`

## Pieces

| part | role |
| --- | --- |
| Carousel | root — owns the Embla instance and provides context |
| CarouselContent | scrolling viewport |
| CarouselItem | single slide; defaults to `basis-full` — override with `basis-1/2`, `basis-1/3` for multi-up rows |
| CarouselPrevious | previous-slide chevron button |
| CarouselNext | next-slide chevron button |

## Common props (root)

| prop | type | purpose |
| --- | --- | --- |
| opts | Embla options | loop / align / dragFree / etc. |
| plugins | Embla plugins | autoplay, class names, etc. |
| orientation | \"horizontal\" | \"vertical\" | axis |
| setApi | (api) => void | receive the Embla API for external controls |

## Patterns

- For autoplay, install `embla-carousel-autoplay` and pass it via `plugins`.
- For pagination dots, subscribe to `api.on("select", …)` via `setApi` and render your own indicator.