Default
1
2
3
4
5
Multiple Slides Visible
1
2
3
4
5
6
7
8
With Loop
A
B
C
D
Vertical
1
2
3
4
5
Props
| Prop | Type | Description |
|---|---|---|
| opts | EmblaOptionsType | Embla carousel options (align, loop, etc.). |
| plugins | EmblaPluginType[] | Embla carousel plugins. |
| orientation | 'horizontal' | 'vertical' | Scroll direction. Default horizontal. |
| setApi | (api: CarouselApi) => void | Callback to access the Embla API instance. |
| className | string | Additional classes for the root element. |
Usage
import { Carousel } from "@/components/ui/Carousel";
<Carousel>
<Carousel.Content>
<Carousel.Item>Slide 1</Carousel.Item>
<Carousel.Item>Slide 2</Carousel.Item>
<Carousel.Item>Slide 3</Carousel.Item>
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel>
{/* With options */}
<Carousel opts={{ loop: true, align: "start" }}>
...
</Carousel>
{/* Multiple visible slides */}
<Carousel.Item className="basis-1/3">...</Carousel.Item>
{/* Vertical */}
<Carousel orientation="vertical">...</Carousel>