Carousel

Default

Three slides with prev/next arrows.

Usage

Import the parts you need from the component's folder.

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  CarouselDotButtons,
} from "@/components/ui/carousel";

With dots

Add CarouselDotButtons for indicator navigation.

Vertical

Set orientation to vertical to stack slides.

Sizes

Give each CarouselItem a basis utility (md:basis-1/2 lg:basis-1/3) to show multiple slides at once.

Spacing

Tighten the gap between slides with a smaller negative margin on CarouselContent (-ml-2) and matching padding on CarouselItem (pl-2).

API

Capture the embla API via @init-api to track the selected slide and total count.

Plugin (Autoplay)

Pass embla plugins through the plugins prop. Here Autoplay advances slides every 2 seconds.

Anatomy

Import all parts and piece them together.

<script setup>
import {
  Carousel,
  CarouselContent,
  CarouselDotButtons,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
</script>

<template>
  <Carousel>
    <CarouselContent>
      <CarouselItem />
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
    <CarouselDotButtons />
  </Carousel>
</template>

API Reference