Carousel

<div class="carousel carousel-show-1">
  <div class="carousel-viewport">
    <div class="carousel-track" style="transform: translateX(0%);">
      <div class="carousel-slide">
        <div class="card"><div class="card-body text-center p-12 bg-primary/10">Slide 1</div></div>
      </div>
      <div class="carousel-slide">
        <div class="card"><div class="card-body text-center p-12 bg-success/10">Slide 2</div></div>
      </div>
      <div class="carousel-slide">
        <div class="card"><div class="card-body text-center p-12 bg-warning/10">Slide 3</div></div>
      </div>
    </div>
  </div>
  <button class="carousel-nav carousel-nav-prev">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
  </button>
  <button class="carousel-nav carousel-nav-next">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
  </button>
  <div class="carousel-pagination">
    <button class="carousel-dot carousel-dot-active"></button>
    <button class="carousel-dot"></button>
    <button class="carousel-dot"></button>
  </div>
</div>

Requires: ux.min.css

<div class="relative w-full overflow-hidden">
  <div class="overflow-hidden w-full">
    <div class="flex transition-transform duration-500" style="transform: translateX(0%);">
      <div class="shrink-0 w-full">
        <div class="card"><div class="card-body text-center p-12 bg-primary/10">Slide 1</div></div>
      </div>
      <div class="shrink-0 w-full">
        <div class="card"><div class="card-body text-center p-12 bg-success/10">Slide 2</div></div>
      </div>
    </div>
  </div>
  <!-- Nav arrows: absolute positioned circles -->
  <!-- Dots: flex justify-center gap-1 -->
</div>

Requires: tw.min.css

// Move track by updating translateX:
// track.style.transform = `translateX(-${index * 100}%)`;
// Update active dot:
// dots.forEach((d, i) => d.classList.toggle('carousel-dot-active', i === index));
// Navigation buttons:
// prevBtn.addEventListener('click', () => goTo(currentIndex - 1));
// nextBtn.addEventListener('click', () => goTo(currentIndex + 1));

<div class="carousel carousel-show-3 carousel-gap-md">
  <div class="carousel-viewport">
    <div class="carousel-track">
      <div class="carousel-slide"><div class="card"><div class="card-body text-center bg-base-200">1</div></div></div>
      <div class="carousel-slide"><div class="card"><div class="card-body text-center bg-base-200">2</div></div></div>
      <div class="carousel-slide"><div class="card"><div class="card-body text-center bg-base-200">3</div></div></div>
      <div class="carousel-slide"><div class="card"><div class="card-body text-center bg-base-200">4</div></div></div>
      <div class="carousel-slide"><div class="card"><div class="card-body text-center bg-base-200">5</div></div></div>
      <div class="carousel-slide"><div class="card"><div class="card-body text-center bg-base-200">6</div></div></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- carousel-show-3: each slide 33.33% width
     carousel-gap-md: 1rem padding between slides -->
<div class="relative w-full overflow-hidden">
  <div class="flex">
    <div class="shrink-0 w-1/3 px-4">...</div>
    <div class="shrink-0 w-1/3 px-4">...</div>
    <div class="shrink-0 w-1/3 px-4">...</div>
  </div>
</div>

Requires: tw.min.css

// For multi-slide, calculate translateX as:
// translateX(-${index * (100 / slidesPerView)}%)

<!-- Fade transition instead of slide -->
<div class="carousel carousel-fade">
  <div class="carousel-viewport">
    <div class="carousel-track">
      <div class="carousel-slide carousel-slide-active">
        <div class="card"><div class="card-body text-center p-12 bg-primary/10">Fade Slide 1</div></div>
      </div>
      <div class="carousel-slide">
        <div class="card"><div class="card-body text-center p-12 bg-success/10">Fade Slide 2</div></div>
      </div>
    </div>
  </div>
  <div class="carousel-pagination carousel-pagination-lines">
    <button class="carousel-dot carousel-dot-active"></button>
    <button class="carousel-dot"></button>
  </div>
</div>

Requires: ux.min.css

<!-- Fade: slides are absolutely positioned, opacity toggles
     Line dots: 24px wide, 4px tall bars -->

Requires: tw.min.css

// For fade: toggle carousel-slide-active class
// slide.classList.toggle('carousel-slide-active', i === index);