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.

With dots

Add CarouselDotButtons for indicator navigation.

Slide 1

Slide 2

Slide 3

Slide 4

Vertical

Set orientation to vertical to stack slides.

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.

Card Notch Carousel 3D