Carousel
Carousel powered by embla-carousel-react with touch/swipe, navigation arrows, dot indicators, and loop mode.
Preview
1
2
3
4
5
Installation
npx drivn add carouselUsage
Import Carousel and compose with dot-notation sub-components.
1 import { Carousel } from "@/components/ui/carousel" 2 3 export default function Page() { 4 return ( 5 <Carousel> 6 <Carousel.Content> 7 <Carousel.Item>Slide 1</Carousel.Item> 8 <Carousel.Item>Slide 2</Carousel.Item> 9 <Carousel.Item>Slide 3</Carousel.Item> 10 </Carousel.Content> 11 </Carousel> 12 ) 13 }
Dots
Auto-generated dot indicators that reflect and control the active slide.
1
2
3
Loop
Enable infinite scrolling in both directions.
1
2
3
Multiple Slides
Show multiple slides at once with basis utility classes.
1
2
3
4
5
Orientation
Set orientation to vertical for a vertical scroll axis.
1
2
3
API Reference
Carousel
| Prop | Type | Default | Description |
|---|---|---|---|
opts | EmblaOptionsType | — | Embla Carousel options (loop, align, slidesToScroll, etc.) |
plugins | EmblaPluginType[] | — | Embla Carousel plugins (autoplay, etc.) |
orientation | "horizontal" | "vertical" | "horizontal" | Scroll axis direction |
setApi | (api: CarouselApi) => void | — | Callback to receive the Embla API instance |
className | string | — | Additional CSS classes for the root element |
Carousel.Content
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the viewport |
Carousel.Item
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the slide wrapper |
Carousel.Dots
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the dots container |