Carousel
Horizontal slider built on embla-carousel-vue. Compose CarouselContent and CarouselItem; add Previous/Next buttons and dot navigation as needed.
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
Sizes
Give each CarouselItem a basis utility (md:basis-1/2 lg:basis-1/3) to show multiple slides at once.
1
2
3
4
5
6
7
8
Spacing
Tighten the gap between slides with a smaller negative margin on CarouselContent (-ml-2) and matching padding on CarouselItem (pl-2).
1
2
3
4
5
6
7
8
API
Capture the embla API via @init-api to track the selected slide and total count.
1
2
3
4
5
Slide 1 of 0
Plugin (Autoplay)
Pass embla plugins through the plugins prop. Here Autoplay advances slides every 2 seconds.
1
2
3
4
5
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>