Carousel

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

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 data-carousel="default" data-total="3">
  <button data-carousel-prev>&larr;</button>
  <div data-carousel-track>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
  </div>
  <button data-carousel-next>&rarr;</button>
</div>

With Indicators

Carousel with dot indicators to show current position.

html
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5 
<div data-carousel="indicators" data-total="5">
  <div class="uc-relative uc-flex uc-items-center uc-gap-4">
    <button data-carousel-prev>...</button>
    <div class="uc-flex-1 uc-overflow-hidden">
      <div data-carousel-track class="uc-flex uc-transition-transform">
        <div>Slide 1</div>
        ...
      </div>
    </div>
    <button data-carousel-next>...</button>
  </div>
  <div data-carousel-dots class="uc-flex uc-gap-2 uc-mt-4">
    <button data-dot="0"></button>
    <button data-dot="1"></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 data-carousel="multi" data-total="6" data-visible="3">
  <button data-carousel-prev>...</button>
  <div class="uc-flex-1 uc-overflow-hidden">
    <div data-carousel-track class="uc-flex uc-gap-4 uc-transition-transform">
      <div class="uc-w-[calc(33.333%-11px)]">Slide 1</div>
      <div class="uc-w-[calc(33.333%-11px)]">Slide 2</div>
      <div class="uc-w-[calc(33.333%-11px)]">Slide 3</div>
      ...
    </div>
  </div>
  <button data-carousel-next>...</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 data-carousel="cards" data-total="4" data-visible="2">
  <button data-carousel-prev>...</button>
  <div class="uc-flex-1 uc-overflow-hidden">
    <div data-carousel-track class="uc-flex uc-gap-4">
      <div class="uc-w-[calc(50%-8px)] uc-rounded-2xl uc-border">
        <div class="uc-bg-accents-blue/10 uc-h-32">...</div>
        <div class="uc-p-4">
          <h3>Wireless Headphones</h3>
          <p>$99.00</p>
        </div>
      </div>
      ...
    </div>
  </div>
  <button data-carousel-next>...</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."
Avatar

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."
Avatar

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."
Avatar

Maria Lopez

Product Manager at Globex

<div data-carousel="testimonial" data-total="3">
  <div class="uc-overflow-hidden">
    <div data-carousel-track class="uc-flex uc-transition-transform">
      <div class="uc-w-full uc-text-center">
        <svg>...</svg>
        <blockquote>"This component library..."</blockquote>
        <div class="uc-flex uc-items-center uc-gap-3">
          <img src="..." alt="Avatar" />
          <div>
            <p>Sarah Johnson</p>
            <p>Lead Designer</p>
          </div>
        </div>
      </div>
      ...
    </div>
  </div>
  <div data-carousel-dots class="uc-flex uc-gap-2 uc-mt-6">
    <button data-dot="0"></button>
    ...
  </div>
  <div class="uc-flex uc-gap-2 uc-mt-4">
    <button data-carousel-prev>...</button>
    <button data-carousel-next>...</button>
  </div>
</div>

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)
uc-flex uc-transition-transform Base Flex layout with animated slide transitions
uc-w-full uc-flex-shrink-0 Layout Each slide takes full width and does not shrink
uc-w-[calc(50%-8px)] Size Half-width slides for 2-visible carousel
uc-w-[calc(33.333%-11px)] Size Third-width slides for 3-visible carousel
uc-w-8 uc-h-8 uc-rounded-full Base Circular navigation button styling
uc-w-2 uc-h-2 uc-rounded-full Base Small dot indicator styling
uc-bg-accents-blue State Active dot indicator color
uc-bg-neutrals-muted 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