carousel
Carousel
Scrolls slides sideways or up and down, with previous and next buttons, dots that jump to a slide and a bar that shows how far the shopper has scrolled.
States: Default, Focus
Parts
| Part | File | Does |
|---|---|---|
| Carousel | Carousel.vue | Groups all parts of the carousel, which scrolls through items sideways. |
| CarouselContent | CarouselContent.vue | Holds the slides of the carousel in a scrollable row. |
| CarouselDots | CarouselDots.vue | Shows one dot per slide and lets the user jump to a slide. |
| CarouselItem | CarouselItem.vue | Holds the content of one slide in the carousel. |
| CarouselNext | CarouselNext.vue | Lets the user scroll the carousel to the next slide. |
| CarouselPrevious | CarouselPrevious.vue | Lets the user scroll the carousel to the previous slide. |
| CarouselProgress | CarouselProgress.vue | Shows how far the user has scrolled through the carousel. |
Anatomy
<Carousel>
<CarouselContent>
<CarouselItem />
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselDots />
</Carousel>Styling
| Part | Recipe |
|---|---|
| Carousel | focus-ring |
| CarouselContent | carousel-content |
| CarouselDots | carousel-dots |
| CarouselDots | carousel-dot |
| CarouselItem | carousel-item |
| CarouselProgress | carousel-progress |
| CarouselProgress | carousel-progress-indicator |
Install
Writes 10 files into components/ui/carousel/. For agents, npx @frontic/ui docs carousel prints this reference as markdown; the MCP server serves the same.
- Installs with it
- button
- npm packages
- @lucide/vue
- @vueuse/core
- class-variance-authority
- embla-carousel-vue@9.0.0-rc04
- reka-ui
Built from
API reference
Carousel Carousel.vue
Groups all parts of the carousel, which scrolls through items sideways. Renders a <div>.
| Prop | Type | Default | |
|---|---|---|---|
| opts | Partial<OptionsType> | — | |
| plugins | (LoosePluginType & { name: string; options: Partial<{ active: boolean; breakpoints: { [key: string]: Omit<Partial<any>, 'breakpoints'>; }; }>; init: (emblaApi: EmblaCarouselType, OptionsHandler: OptionsHandlerType) => void; destroy: () => void; })[] | — | |
| orientation | 'vertical' | 'horizontal' | 'horizontal' | |
| roleDescription | string | 'carousel' | |
| Event | Payload | |
|---|---|---|
| init-api | payload: EmblaCarouselType | undefined | |
| Slot | Slot props | |
|---|---|---|
| default | { canScrollNext: boolean; canScrollPrev: boolean; carouselApi: EmblaCarouselType | undefined; carouselRef: HTMLElement | undefined; orientation: "vertical" | "horizontal" | undefined; scrollNext: () => void; scrollPrev: () => void; } | |
| Recipe focus-ring | Sets | |
|---|---|---|
| base: focus-ring | 3 properties | |
CarouselContent CarouselContent.vue
CarouselDots CarouselDots.vue
CarouselItem CarouselItem.vue
CarouselNext CarouselNext.vue
CarouselPrevious CarouselPrevious.vue
CarouselProgress CarouselProgress.vue
Example