Carousel

Display

A responsive slide carousel with arrow controls, dot indicators, autoplay, and loop support.

Props

Prop	Type	Default	Description
`count`	`number`	`1`	Number of slides (matches slot children).
`arrows`	`boolean`	`true`	Show prev/next buttons.
`dots`	`boolean`	`true`	Show dot indicators.
`autoplay`	`boolean`	`false`	Auto-advance slides.
`interval`	`number`	`4000`	Autoplay interval in ms.
`loop`	`boolean`	`true`	Loop back to start.

Examples

Default

Slide 1

Slide 2

Slide 3

vue

<DsCarousel :count="3" :arrows="true" :dots="true" :loop="true">
  <DsCarouselSlide>
    <div class="flex items-center justify-center h-48 bg-ds-primary-subtle rounded-ds-lg text-ds-primary font-semibold">
      Slide 1
    </div>
  </DsCarouselSlide>
  <DsCarouselSlide>
    <div class="flex items-center justify-center h-48 bg-ds-success-subtle rounded-ds-lg text-ds-success font-semibold">
      Slide 2
    </div>
  </DsCarouselSlide>
  <DsCarouselSlide>
    <div class="flex items-center justify-center h-48 bg-ds-warning-subtle rounded-ds-lg text-ds-warning font-semibold">
      Slide 3
    </div>
  </DsCarouselSlide>
</DsCarousel>

Skeleton

Use DsCarouselSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsCarouselSkeleton />

Accessibility

Arrow buttons have aria-label.
Dot buttons have aria-label and aria-current.
Respects prefers-reduced-motion.

Card

CodeBlock