Carousel
Horizontal slider built on embla-carousel-vue. Compose CarouselContent and CarouselItem; add Previous/Next buttons and dot navigation as needed.
Anatomy
Import all parts and piece them together.
vue
<script setup>
import {
Carousel,
CarouselContent,
CarouselDotButtons,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
</script>
<template>
<Carousel>
<CarouselContent>
<CarouselItem />
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselDotButtons />
</Carousel>
</template>Default
Three slides with prev/next arrows.
1
2
3
4
5
With dots
Add CarouselDotButtons for indicator navigation.
Slide 1
Slide 2
Slide 3
Slide 4
Vertical
Set orientation to vertical to stack slides.
1
2
3
4
5
API Reference
Props, events, and slots for each sub-component.
Carousel
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Slide axis. |
| opts | EmblaOptionsType | — | Pass embla-carousel options (loop, align, dragFree, ...). |
| plugins | EmblaPluginType[] | [] | Embla plugins (Autoplay, WheelGestures, ...). |
Events
| Event | Description |
|---|---|
| init-api | Fired with the embla API once initialised. Use to control programmatically. |
Slots
| Slot | Description |
|---|---|
| default | Scoped slot exposing { carouselApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }. |
CarouselContent / CarouselItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Extra classes for the track and each slide. |
Slots
| Slot | Description |
|---|---|
| default | CarouselItem slides, and slide content respectively. |
CarouselPrevious / CarouselNext
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Extra classes for the navigation buttons. |
Slots
| Slot | Description |
|---|---|
| default | Override the default arrow icon. |
CarouselDotButtons
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Extra classes for the dot strip. |