Carousel · Panel

Basic usage

Root holds a viewport (scroll container) and slides (data-mv-carousel-item). Add tabIndex={0} (or tabindex="0" in HTML) so ArrowLeft / ArrowRight work when the carousel is focused.

<div class="mx-auto w-full max-w-lg space-y-3" data-mv-carousel="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      <img src="./assets/media/products/1.avif?auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="Product roadmap" class="h-44 w-full object-cover">
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      <img src="./assets/media/products/1.jpg?auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="Product roadmap" class="h-44 w-full object-cover">
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      <img src="./assets/media/products/2.jpg?auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="Product roadmap" class="h-44 w-full object-cover">
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Keyboard

Put tabindex="0" (or tabIndex={0}) on the carousel root so it can receive focus, then use ArrowLeft / ArrowRight to go to the previous or next slide while focus is inside the carousel (including on the root). The handler skips arrow keys when focus is ...

Focus the carousel (click inside it or press Tab), then use ← / → to move between slides. Arrow keys are ignored while typing in inputs.

Slide 1

Slide 2

Slide 3

Slide 4

<div class="mx-auto w-full max-w-lg space-y-3">
  <p class="text-muted-foreground text-center text-sm leading-relaxed">
    Focus the carousel (click inside it or press<!-- -->
    <span class="mv-kbd mv-kbd-xs mv-kbd-outline">Tab</span>), then use<!-- -->
    <span class="mv-kbd mv-kbd-xs mv-kbd-outline">←</span> /
    <span class="mv-kbd mv-kbd-xs mv-kbd-outline">→</span>
    <!-- -->to move between slides. Arrow keys are ignored while typing in
    inputs.
  </p>
  <div class="rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background" data-mv-carousel="true" tabindex="0" role="region" aria-roledescription="carousel" aria-label="Keyboard carousel example">
    <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-auto scroll-smooth">
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
        Slide 1
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
        Slide 2
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
        Slide 3
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
        Slide 4
      </div>
    </div>
    <div class="flex justify-center gap-2 pt-3">
      <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
        Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
        Next
      </button>
    </div>
  </div>
</div>

Scrollbar visible

By default the viewport and thumbnail strip use hidden native scrollbars (scrolling still works). Set data-mv-carousel-show-scrollbar="true" on the root—or pass showScrollbar: true to getOrCreateInstance—to show them. This example also adds mv-scrollab...

First slide

Second slide

Third slide

<div class="mx-auto w-full max-w-lg space-y-3" data-mv-carousel="true" data-mv-carousel-show-scrollbar="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="mv-scrollable flex gap-4 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      First slide
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Second slide
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Third slide
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Overlay arrows

Add prev/next buttons as overlay controls inside a relative carousel wrapper so they stay visible and easy to click.

First slide

Second slide

Third slide

<div class="mx-auto w-full max-w-lg" data-mv-carousel="true" data-mv-carousel-infinite-loop="true" tabindex="0">
  <div class="relative overflow-hidden rounded-xl border border-border">
    <div data-mv-carousel-viewport="true" class="bg-muted flex overflow-x-auto scroll-smooth">
      <div data-mv-carousel-item="true" class="flex min-w-full shrink-0 items-center justify-center py-16 text-sm font-medium">
        First slide
      </div>
      <div data-mv-carousel-item="true" class="flex min-w-full shrink-0 items-center justify-center py-16 text-sm font-medium">
        Second slide
      </div>
      <div data-mv-carousel-item="true" class="flex min-w-full shrink-0 items-center justify-center py-16 text-sm font-medium">
        Third slide
      </div>
    </div>
    <button type="button" class="absolute top-1/2 z-10 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-xs transition-all duration-200 hover:scale-105 hover:border-primary/40 hover:bg-primary/10 hover:text-primary hover:shadow-sm focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" style="left: 0.75rem; cursor: pointer" data-mv-carousel-prev="true" aria-label="Previous slide">
      <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" class="lucide lucide-chevron-left size-5" aria-hidden="true">
        <path d="m15 18-6-6 6-6"></path>
      </svg></button><button type="button" class="absolute top-1/2 z-10 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-xs transition-all duration-200 hover:scale-105 hover:border-primary/40 hover:bg-primary/10 hover:text-primary hover:shadow-sm focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" style="right: 0.75rem; cursor: pointer" data-mv-carousel-next="true" aria-label="Next slide">
      <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" class="lucide lucide-chevron-right size-5" aria-hidden="true">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </button>
  </div>
</div>

Pagination

Place data-mv-carousel-pagination on a wrapper; each dot is data-mv-carousel-pagination-item in slide order. Active item gets aria-current="true".

Slide 1

Slide 2

Slide 3

<div class="mx-auto w-full max-w-lg space-y-4" data-mv-carousel="true" tabindex="0">
  <div class="relative overflow-hidden rounded-xl border border-border">
    <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-auto scroll-smooth">
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center py-16 text-sm font-medium">
        Slide 1
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center py-16 text-sm font-medium">
        Slide 2
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center py-16 text-sm font-medium">
        Slide 3
      </div>
    </div>
    <div data-mv-carousel-pagination="true" class="absolute bottom-0 left-0 right-0 z-10 flex justify-center gap-2 bg-transparent px-2 py-2" role="tablist" aria-label="Slides">
      <button type="button" data-mv-carousel-pagination-item="true" class="size-2.5 shrink-0 rounded-full bg-background p-0 opacity-90 transition-opacity hover:opacity-100 aria-[current=true]:bg-primary aria-[current=true]:opacity-100" aria-label="Go to slide 1"></button><button type="button" data-mv-carousel-pagination-item="true" class="size-2.5 shrink-0 rounded-full bg-background p-0 opacity-90 transition-opacity hover:opacity-100 aria-[current=true]:bg-primary aria-[current=true]:opacity-100" aria-label="Go to slide 2"></button><button type="button" data-mv-carousel-pagination-item="true" class="size-2.5 shrink-0 rounded-full bg-background p-0 opacity-90 transition-opacity hover:opacity-100 aria-[current=true]:bg-primary aria-[current=true]:opacity-100" aria-label="Go to slide 3"></button>
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Autoplay

Autoplay respects prefers-reduced-motion: reduce (timer is not started). Hover and focus-in pause autoplay when data-mv-carousel-pause-on-hover is true (default).

Auto 1

Auto 2

Auto 3

<div class="mx-auto w-full max-w-lg space-y-3" data-mv-carousel="true" data-mv-carousel-autoplay="true" data-mv-carousel-autoplay-interval="3500" data-mv-carousel-infinite-loop="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Auto 1
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Auto 2
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Auto 3
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Infinite loop

At the last slide, Next wraps to the first; at the first, Previous wraps to the last.

Loop A

Loop B

Loop C

<div class="mx-auto w-full max-w-lg space-y-3" data-mv-carousel="true" data-mv-carousel-infinite-loop="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Loop A
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Loop B
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Loop C
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

RTL

Set dir="rtl" on the root (or rely on document direction). Arrow keys follow visual next / previous in RTL.

يمين

وسط

يسار

<div class="mx-auto w-full max-w-lg space-y-3" dir="rtl" data-mv-carousel="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      يمين
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      وسط
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      يسار
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      السابق</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      التالي
    </button>
  </div>
</div>

Multiple slides

Use CSS (min-w-[45%], etc.) so several slides peek into the viewport; the component still advances one slide index per next/prev.

One

Two

Three

Four

Five

Six

<div class="mx-auto w-full max-w-xl space-y-3" data-mv-carousel="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-3 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      One
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Two
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Three
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Four
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Five
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Six
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Centered

data-mv-carousel-centered="true" scrolls the active slide with inline: "center".

A

B

C

D

E

F

<div class="mx-auto w-full max-w-xl space-y-3" data-mv-carousel="true" data-mv-carousel-centered="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-3 overflow-x-auto scroll-smooth px-8">
    <div data-mv-carousel-item="true" class="bg-muted flex w-[70%] min-w-[70%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[50%] sm:min-w-[50%]">
      A
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[70%] min-w-[70%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[50%] sm:min-w-[50%]">
      B
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[70%] min-w-[70%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[50%] sm:min-w-[50%]">
      C
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[70%] min-w-[70%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[50%] sm:min-w-[50%]">
      D
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[70%] min-w-[70%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[50%] sm:min-w-[50%]">
      E
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[70%] min-w-[70%] shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[50%] sm:min-w-[50%]">
      F
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Draggable

Pointer-drag on the viewport scrolls horizontally. Not combined with snap in this API: when data-mv-carousel-snap="true", draggable behavior is disabled.

Drag horizontally on the track (snap is off).

Drag 1

Drag 2

Drag 3

Drag 4

Drag 5

Drag 6

<div class="mx-auto w-full max-w-xl space-y-3" data-mv-carousel="true" data-mv-carousel-draggable="true" tabindex="0">
  <p class="text-muted-foreground text-center text-xs">
    Drag horizontally on the track (snap is off).
  </p>
  <div data-mv-carousel-viewport="true" class="flex cursor-grab gap-3 overflow-x-auto scroll-smooth active:cursor-grabbing">
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 select-none items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Drag 1
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 select-none items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Drag 2
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 select-none items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Drag 3
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 select-none items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Drag 4
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 select-none items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Drag 5
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 select-none items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Drag 6
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Auto height

data-mv-carousel-auto-height="true" sets the viewport height from the active slide (see ResizeObserver in implementation).

Short slide

Taller slide

Medium slide

<div class="mx-auto w-full max-w-lg space-y-3" data-mv-carousel="true" data-mv-carousel-auto-height="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-hidden overflow-y-visible scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-8 text-sm font-medium">
      Short slide
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-20 text-sm font-medium">
      Taller slide
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-12 text-sm font-medium">
      Medium slide
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Snap

Add Tailwind snap-x / snap-mandatory on the viewport and snap-center on items; enable data-mv-carousel-snap="true" so drag is not attached.

Viewport uses scroll snap; draggable is disabled when snap is on.

Snap 1

Snap 2

Snap 3

Snap 4

Snap 5

Snap 6

<div class="mx-auto w-full max-w-xl space-y-3" data-mv-carousel="true" data-mv-carousel-snap="true" tabindex="0">
  <p class="text-muted-foreground text-center text-xs">
    Viewport uses scroll snap; draggable is disabled when snap is on.
  </p>
  <div data-mv-carousel-viewport="true" class="flex snap-x snap-mandatory gap-3 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 snap-center items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Snap 1
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 snap-center items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Snap 2
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 snap-center items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Snap 3
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 snap-center items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Snap 4
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 snap-center items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Snap 5
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex w-[45%] min-w-[45%] shrink-0 snap-center items-center justify-center rounded-lg py-12 text-sm font-medium sm:w-[31%] sm:min-w-[31%]">
      Snap 6
    </div>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Info

data-mv-carousel-current and data-mv-carousel-total show 1-based current index and slide count.

Alpha

Beta

Gamma

0 / 0

<div class="mx-auto w-full max-w-lg space-y-3" data-mv-carousel="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Alpha
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Beta
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-16 text-sm font-medium">
      Gamma
    </div>
  </div>
  <div class="flex items-center justify-between gap-2">
    <div class="text-muted-foreground text-sm tabular-nums">
      <span data-mv-carousel-current="true" class="text-foreground font-medium">0</span><span> / </span><span data-mv-carousel-total="true">0</span>
    </div>
    <div class="flex gap-2">
      <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
        Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
        Next
      </button>
    </div>
  </div>
</div>

Thumbnails (horizontal)

data-mv-carousel-thumbnails wraps controls; each data-mv-carousel-thumbnail maps to a slide by DOM order.

T1

T2

T3

T4

T5

T6

<div class="mx-auto w-full max-w-xl space-y-4" data-mv-carousel="true" tabindex="0">
  <div data-mv-carousel-viewport="true" class="flex gap-3 overflow-x-auto scroll-smooth">
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
      T1
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
      T2
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
      T3
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
      T4
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
      T5
    </div>
    <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
      T6
    </div>
  </div>
  <div data-mv-carousel-thumbnails="true" class="flex justify-center gap-2 overflow-x-auto scroll-smooth pb-1" role="tablist" aria-label="Thumbnails">
    <button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground shrink-0 rounded-md border px-3 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 1">
      T1</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground shrink-0 rounded-md border px-3 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 2">
      T2</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground shrink-0 rounded-md border px-3 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 3">
      T3</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground shrink-0 rounded-md border px-3 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 4">
      T4</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground shrink-0 rounded-md border px-3 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 5">
      T5</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground shrink-0 rounded-md border px-3 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 6">
      T6
    </button>
  </div>
  <div class="flex justify-center gap-2">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
      Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
      Next
    </button>
  </div>
</div>

Thumbnails (vertical)

Same behavior with a column layout.

V1

V2

V3

V4

V5

V6

<div class="mx-auto flex w-full max-w-2xl gap-4" data-mv-carousel="true" tabindex="0">
  <div data-mv-carousel-thumbnails="true" class="flex w-24 shrink-0 flex-col gap-2 overflow-y-auto scroll-smooth" role="tablist" aria-label="Thumbnails">
    <button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 1">
      V1</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 2">
      V2</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 3">
      V3</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 4">
      V4</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 5">
      V5</button><button type="button" data-mv-carousel-thumbnail="true" class="bg-muted hover:bg-accent border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-2 text-xs font-medium data-[mv-carousel-thumbnail-active]:border-primary data-[mv-carousel-thumbnail-active]:text-foreground" aria-label="Thumbnail 6">
      V6
    </button>
  </div>
  <div class="min-w-0 flex-1 space-y-3">
    <div data-mv-carousel-viewport="true" class="flex gap-3 overflow-x-auto scroll-smooth">
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        V1
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        V2
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        V3
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        V4
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        V5
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        V6
      </div>
    </div>
    <div class="flex justify-center gap-2">
      <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
        Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
        Next
      </button>
    </div>
  </div>
</div>

Destroy & reinitialize

Use MVCarousel.getInstance(root)?.dispose() then MVCarousel.getOrCreateInstance(root) after dynamic updates.

A

B

C

<div class="mx-auto w-full max-w-lg space-y-4">
  <div id="mvui-carousel-destroy-root" class="space-y-3" data-mv-carousel="true" tabindex="0">
    <div data-mv-carousel-viewport="true" class="flex gap-4 overflow-x-auto scroll-smooth">
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        A
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        B
      </div>
      <div data-mv-carousel-item="true" class="bg-muted flex min-w-full shrink-0 items-center justify-center rounded-lg py-14 text-sm font-medium">
        C
      </div>
    </div>
    <div class="flex justify-center gap-2">
      <button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-prev="true">
        Previous</button><button type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-carousel-next="true">
        Next
      </button>
    </div>
  </div>
  <div class="flex flex-wrap justify-center gap-2">
    <button type="button" id="mvui-carousel-destroy-btn" class="mv-btn mv-btn-outline mv-btn-sm" disabled>
      Destroy carousel</button><button type="button" id="mvui-carousel-reinit-btn" class="mv-btn mv-btn-primary mv-btn-sm" disabled>
      Reinitialize
    </button>
  </div>
  <script>
    (function () {
      function init() {
        var root = document.getElementById("mvui-carousel-destroy-root");
        var destroyBtn = document.getElementById("mvui-carousel-destroy-btn");
        var reinitBtn = document.getElementById("mvui-carousel-reinit-btn");
        if (!root || !destroyBtn || !reinitBtn || !window.MVCarousel) return;
        if (destroyBtn.getAttribute("data-mv-carousel-destroy-demo") === "1")
          return;
        destroyBtn.setAttribute("data-mv-carousel-destroy-demo", "1");

        function refreshButtons() {
          var inst = window.MVCarousel.getInstance(root);
          destroyBtn.toggleAttribute("disabled", !inst);
          reinitBtn.toggleAttribute("disabled", !!inst);
        }

        destroyBtn.addEventListener("click", function () {
          var inst = window.MVCarousel.getInstance(root);
          if (inst) inst.dispose();
          refreshButtons();
        });

        reinitBtn.addEventListener("click", function () {
          window.MVCarousel.getOrCreateInstance(root);
          refreshButtons();
        });

        /* After DOMContentLoaded: this demo's handler runs before MVUI's; defer so MVCarousel.init() has run. */
        setTimeout(refreshButtons, 0);
      }

      /* Inline script runs before MVui.min.js in the preview document; wait for DOM + bundle. */
      function schedule() {
        if (document.readyState === "loading") {
          document.addEventListener("DOMContentLoaded", init);
        } else if (window.MVCarousel) {
          init();
        } else {
          window.addEventListener("load", init);
        }
      }
      schedule();
    })();
  </script>
</div>