Carousel

A carousel with motion and swipe built using Embla.

Examples

Default

1

2

3

4

5

<script setup>
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  Card,
  CardContent
} from '@empathyds/vue'
</script>

<Carousel class="w-full max-w-xs">
  <CarouselContent>
    <CarouselItem v-for="(_, index) in 5" :key="index">
      <div class="p-1">
        <Card>
          <CardContent class="flex aspect-square items-center justify-center p-6">
            <span class="text-4xl font-semibold">{{ index + 1 }}</span>
          </CardContent>
        </Card>
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Props

Carousel

Prop	Type	Default	Description
opts	CarouselOptions	-	The options for the carousel.
plugins	CarouselPlugin	-	The plugins for the carousel.
orientation	"horizontal" | "vertical"	"horizontal"	The orientation of the carousel.

Events

Carousel

Event	Payload	Description
init-api	CarouselApi	Event handler called when the carousel is initialized.