Carousel

Carousel is a compound component for cycling through slide content with optional autoplay, navigation arrows, and dot indicators.

ExamplesCodeUsageChangelog

Basic usage

Slide 1

Slide 2

Slide 3

Tailwind v4

<script setup>
import { ref } from 'vue'
const slide = ref(0)
</script>

<Carousel v-model="slide">
  <CarouselItem>Slide 1</CarouselItem>
  <CarouselItem>Slide 2</CarouselItem>
  <CarouselItem>Slide 3</CarouselItem>
</Carousel>

No arrows

Alpha

Beta

Tailwind v4

<Carousel :show-arrows="false">
  <CarouselItem>Alpha</CarouselItem>
  <CarouselItem>Beta</CarouselItem>
</Carousel>

Props — Carousel

Prop	Type	Default	Description
modelValue	number	0	Active slide index (use with v-model)
loop	boolean	true	Loop from last to first slide
autoplay	boolean	false	Auto-advance slides; pauses on hover
interval	number	4000	Autoplay interval in milliseconds
showDots	boolean	true	Show dot indicators
showArrows	boolean	true	Show previous/next arrow buttons

Events — Carousel

Event	Payload	Description
update:modelValue	number	Emitted when the active index changes

Slots — CarouselItem

Slot	Description
default	Slide content