Carousel

A slideshow component for cycling through elements like images or cards.

Interactive Requires: veritheme.js JS init: automatic

Default

A simple carousel showing one slide at a time with navigation arrows.

html

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

<div class="vt-relative vt-flex vt-items-center vt-gap-4 vt-max-w-xl vt-mx-auto" data-carousel="default" data-total="5">
  <button data-carousel-prev="" class="vt-carousel-nav-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
      <path d="m15 18-6-6 6-6"></path>
    </svg>
  </button>
  <div class="vt-flex-1 vt-overflow-hidden">
    <div data-carousel-track="" class="vt-flex vt-transition-transform vt-duration-300 vt-ease-in-out">
      <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 1</span>
      </div>
      <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 2</span>
      </div>
      <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-warning-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 3</span>
      </div>
      <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-error-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 4</span>
      </div>
      <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 5</span>
      </div>
    </div>
  </div>
  <button data-carousel-next="" class="vt-carousel-nav-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
</div>

With Indicators

Carousel with dot indicators to show current position.

html

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

<div class="vt-max-w-xl vt-mx-auto" data-carousel="indicators" data-total="5">
  <div class="vt-relative vt-flex vt-items-center vt-gap-4">
    <button data-carousel-prev="" class="vt-carousel-nav-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
        <path d="m15 18-6-6 6-6"></path>
      </svg>
    </button>
    <div class="vt-flex-1 vt-overflow-hidden">
      <div data-carousel-track="" class="vt-flex vt-transition-transform vt-duration-300 vt-ease-in-out">
        <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
          <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 1</span>
        </div>
        <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
          <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 2</span>
        </div>
        <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-warning-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
          <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 3</span>
        </div>
        <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-error-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
          <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 4</span>
        </div>
        <div class="vt-w-full vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
          <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 5</span>
        </div>
      </div>
    </div>
    <button data-carousel-next="" class="vt-carousel-nav-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </button>
  </div>
  <div data-carousel-dots="" class="vt-flex vt-items-center vt-justify-center vt-gap-2 vt-mt-4">
    <button class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-brand-fill vt-transition-colors" data-dot="0"></button>
    <button class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate vt-transition-colors" data-dot="1"></button>
    <button class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate vt-transition-colors" data-dot="2"></button>
    <button class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate vt-transition-colors" data-dot="3"></button>
    <button class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate vt-transition-colors" data-dot="4"></button>
  </div>
</div>

Multiple Slides

Shows multiple slides visible at once in a row.

html

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

<div class="vt-relative vt-flex vt-items-center vt-gap-4" data-carousel="multi" data-total="6" data-visible="3">
  <button data-carousel-prev="" class="vt-carousel-nav-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
      <path d="m15 18-6-6 6-6"></path>
    </svg>
  </button>
  <div class="vt-flex-1 vt-overflow-hidden">
    <div data-carousel-track="" class="vt-flex vt-gap-4 vt-transition-transform vt-duration-300 vt-ease-in-out">
      <div class="vt-w-[calc(33.333%-11px)] vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 1</span>
      </div>
      <div class="vt-w-[calc(33.333%-11px)] vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 2</span>
      </div>
      <div class="vt-w-[calc(33.333%-11px)] vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-warning-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 3</span>
      </div>
      <div class="vt-w-[calc(33.333%-11px)] vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-error-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 4</span>
      </div>
      <div class="vt-w-[calc(33.333%-11px)] vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 5</span>
      </div>
      <div class="vt-w-[calc(33.333%-11px)] vt-flex-shrink-0 vt-rounded-2xl vt-border vt-border-border-default vt-bg-brand-fill/10 vt-h-48 vt-flex vt-items-center vt-justify-center">
        <span class="vt-text-sm vt-font-medium vt-text-foreground-secondary">Slide 6</span>
      </div>
    </div>
  </div>
  <button data-carousel-next="" class="vt-carousel-nav-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
</div>

Card Carousel

Carousel of product cards with a peek at the next card.

html

Wireless Headphones

Premium sound with noise cancellation

$99.00

Smart Watch

Track your fitness and stay connected

$249.00

Bluetooth Speaker

Portable speaker with deep bass

$59.00

USB-C Hub

7-in-1 multiport adapter

$39.00

<div class="vt-relative vt-flex vt-items-center vt-gap-4" data-carousel="cards" data-total="4" data-visible="2">
  <button data-carousel-prev="" class="vt-carousel-nav-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
      <path d="m15 18-6-6 6-6"></path>
    </svg>
  </button>
  <div class="vt-flex-1 vt-overflow-hidden">
    <div data-carousel-track="" class="vt-flex vt-gap-4 vt-transition-transform vt-duration-300 vt-ease-in-out">
      <div class="vt-w-[calc(50%-8px)] vt-flex-shrink-0 vt-card">
        <div class="vt-bg-brand-fill/10 vt-h-32 vt-flex vt-items-center vt-justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-image vt-w-8 vt-h-8 vt-text-foreground-muted">
            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
          </svg>
        </div>
        <div class="vt-p-4">
          <h3 class="vt-text-sm vt-font-semibold">Wireless Headphones</h3>
          <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">Premium sound with noise cancellation</p>
          <p class="vt-text-sm vt-font-semibold vt-mt-2">$99.00</p>
        </div>
      </div>
      <div class="vt-w-[calc(50%-8px)] vt-flex-shrink-0 vt-card">
        <div class="vt-bg-brand-fill/10 vt-h-32 vt-flex vt-items-center vt-justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-image vt-w-8 vt-h-8 vt-text-foreground-muted">
            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
          </svg>
        </div>
        <div class="vt-p-4">
          <h3 class="vt-text-sm vt-font-semibold">Smart Watch</h3>
          <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">Track your fitness and stay connected</p>
          <p class="vt-text-sm vt-font-semibold vt-mt-2">$249.00</p>
        </div>
      </div>
      <div class="vt-w-[calc(50%-8px)] vt-flex-shrink-0 vt-card">
        <div class="vt-bg-warning-fill/10 vt-h-32 vt-flex vt-items-center vt-justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-image vt-w-8 vt-h-8 vt-text-foreground-muted">
            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
          </svg>
        </div>
        <div class="vt-p-4">
          <h3 class="vt-text-sm vt-font-semibold">Bluetooth Speaker</h3>
          <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">Portable speaker with deep bass</p>
          <p class="vt-text-sm vt-font-semibold vt-mt-2">$59.00</p>
        </div>
      </div>
      <div class="vt-w-[calc(50%-8px)] vt-flex-shrink-0 vt-card">
        <div class="vt-bg-error-fill/10 vt-h-32 vt-flex vt-items-center vt-justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-image vt-w-8 vt-h-8 vt-text-foreground-muted">
            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
          </svg>
        </div>
        <div class="vt-p-4">
          <h3 class="vt-text-sm vt-font-semibold">USB-C Hub</h3>
          <p class="vt-text-xs vt-text-foreground-muted vt-mt-1">7-in-1 multiport adapter</p>
          <p class="vt-text-sm vt-font-semibold vt-mt-2">$39.00</p>
        </div>
      </div>
    </div>
  </div>
  <button data-carousel-next="" class="vt-carousel-nav-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </button>
</div>

Testimonial Carousel

Centered testimonial with author info and navigation dots.

html

"This component library has completely transformed our development workflow. The design system is intuitive and beautifully crafted."

Sarah Johnson

Lead Designer at Acme Inc

"Incredible attention to detail. Every component works exactly as expected out of the box. Saved us months of work."

Alex Chen

CTO at StartupXYZ

"The best UI kit I've ever used. Clean, consistent, and easy to customize. Our team adopted it in a day."

Maria Lopez

Product Manager at Globex

<div class="vt-max-w-lg vt-mx-auto" data-carousel="testimonial" data-total="3">
  <div class="vt-overflow-hidden">
    <div data-carousel-track="" class="vt-flex vt-transition-transform vt-duration-300 vt-ease-in-out">
      <!-- Testimonial 1 -->
      <div class="vt-w-full vt-flex-shrink-0 vt-text-center vt-px-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-quote vt-w-8 vt-h-8 vt-mx-auto vt-mb-4 vt-text-foreground-muted/40">
          <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
        </svg>
        <blockquote class="vt-text-lg vt-font-medium vt-leading-relaxed vt-mb-6">"This component library has completely transformed our development workflow. The design system is intuitive and beautifully crafted."</blockquote>
        <div class="vt-flex vt-items-center vt-justify-center vt-gap-3">
          <img src="https://i.pravatar.cc/40?img=32" alt="Avatar" class="vt-w-10 vt-h-10 vt-rounded-full">
          <div class="vt-text-left">
            <p class="vt-text-sm vt-font-semibold">Sarah Johnson</p>
            <p class="vt-text-xs vt-text-foreground-muted">Lead Designer at Acme Inc</p>
          </div>
        </div>
      </div>
      <!-- Testimonial 2 -->
      <div class="vt-w-full vt-flex-shrink-0 vt-text-center vt-px-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-quote vt-w-8 vt-h-8 vt-mx-auto vt-mb-4 vt-text-foreground-muted/40">
          <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
        </svg>
        <blockquote class="vt-text-lg vt-font-medium vt-leading-relaxed vt-mb-6">"Incredible attention to detail. Every component works exactly as expected out of the box. Saved us months of work."</blockquote>
        <div class="vt-flex vt-items-center vt-justify-center vt-gap-3">
          <img src="https://i.pravatar.cc/40?img=11" alt="Avatar" class="vt-w-10 vt-h-10 vt-rounded-full">
          <div class="vt-text-left">
            <p class="vt-text-sm vt-font-semibold">Alex Chen</p>
            <p class="vt-text-xs vt-text-foreground-muted">CTO at StartupXYZ</p>
          </div>
        </div>
      </div>
      <!-- Testimonial 3 -->
      <div class="vt-w-full vt-flex-shrink-0 vt-text-center vt-px-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-quote vt-w-8 vt-h-8 vt-mx-auto vt-mb-4 vt-text-foreground-muted/40">
          <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
        </svg>
        <blockquote class="vt-text-lg vt-font-medium vt-leading-relaxed vt-mb-6">"The best UI kit I've ever used. Clean, consistent, and easy to customize. Our team adopted it in a day."</blockquote>
        <div class="vt-flex vt-items-center vt-justify-center vt-gap-3">
          <img src="https://i.pravatar.cc/40?img=47" alt="Avatar" class="vt-w-10 vt-h-10 vt-rounded-full">
          <div class="vt-text-left">
            <p class="vt-text-sm vt-font-semibold">Maria Lopez</p>
            <p class="vt-text-xs vt-text-foreground-muted">Product Manager at Globex</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div data-carousel-dots="" class="vt-flex vt-items-center vt-justify-center vt-gap-2 vt-mt-6">
    <button class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-brand-fill vt-transition-colors" data-dot="0"></button>
    <button class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate vt-transition-colors" data-dot="1"></button>
    <button class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-surface-moderate vt-transition-colors" data-dot="2"></button>
  </div>
  <div class="vt-flex vt-justify-center vt-gap-2 vt-mt-4">
    <button data-carousel-prev="" class="vt-carousel-nav-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
        <path d="m15 18-6-6 6-6"></path>
      </svg>
    </button>
    <button data-carousel-next="" class="vt-carousel-nav-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </button>
  </div>
</div>

Guidelines

Cycle through a set of equally-important items like images or cards; always give clear navigation and a position indicator.

Slide 1

Pair navigation arrows with dot indicators for orientation.

Slide 1

Don't

Don't hide navigation — users can't tell more slides exist.

Anatomy

HTML structure of the Carousel component.

div[data-carousel]                         ← Carousel root
├── div[data-carousel-track]               ← Slides container (overflow hidden)
│   └── div (slide)                        ← Individual slide
├── button[data-carousel-prev]             ← Previous button
├── button[data-carousel-next]             ← Next button
└── div[data-carousel-dots]               ← Dot indicators (optional)
    └── button[data-dot="n"]               ← Individual dot

API Reference

All data attributes and utility classes available for the Carousel component.

Class	Type	Description
`data-carousel`	Base	Data attribute on the carousel container to initialize behavior
`data-carousel-track`	Base	Flex container for slides that translates on navigation
`data-carousel-prev / data-carousel-next`	Base	Previous and next navigation button triggers
`data-carousel-dots`	Base	Container for dot indicator buttons
`data-total`	Base	Total number of slides in the carousel
`data-visible`	Variant	Number of slides visible at once (default 1)
`vt-flex vt-transition-transform`	Base	Flex layout with animated slide transitions
`vt-w-full vt-flex-shrink-0`	Layout	Each slide takes full width and does not shrink
`vt-w-[calc(50%-8px)]`	Size	Half-width slides for 2-visible carousel
`vt-w-[calc(33.333%-11px)]`	Size	Third-width slides for 3-visible carousel
`vt-carousel-nav-btn`	Base	Circular navigation button styling
`vt-w-2 vt-h-2 vt-rounded-full`	Base	Small dot indicator styling
`vt-bg-brand-fill`	State	Active dot indicator color
`vt-bg-surface-moderate`	State	Inactive dot indicator color

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="region" with aria-roledescription="carousel" and aria-label
Slides	Each slide should have role="group" with aria-roledescription="slide"
Keyboard	Arrow keys navigate slides, Tab moves to controls
Auto-play	Provide pause button if auto-rotating, respect prefers-reduced-motion
Live region	Announce current slide via aria-live="polite" on slide change