Carousel

A carousel indicator renders a list of item buttons. The active item displays a top progress bar that fills over time.

Structure

<div class="tng-carousel p-relative">
  <div class="tng-carousel-track">
    <div class="tng-carousel-slide">
      <div class="tng-slot" style="block-size: 300px">Slide 1</div>
    </div>
    <div class="tng-carousel-slide">
      <div class="tng-slot" style="block-size: 300px">Slide 2</div>
    </div>
    <div class="tng-carousel-slide">
      <div class="tng-slot" style="block-size: 300px">Slide 3</div>
    </div>
  </div>
  <div class="tng-carousel-controls p-absolute at-bottom inset-lg">
    <button class="tng-carousel-control">Item 1</button>
    <button class="tng-carousel-control is-active" disabled>
      Item 2
    </button>
    <button class="tng-carousel-control">Item 3</button>
  </div>
</div>

Slide 1

Slide 2

Slide 3

Item 1 Item 2 Item 3

Progress Duration

The active progress animation duration is controlled by the custom property --tng-carousel-control-progress-duration.

• Apply it on .tng-carousel-controls to set one duration for all items. The default is 5 seconds.
• Apply it on .tng-carousel-control to set duration per asset.

<div
  class="tng-carousel-controls"
  style="--tng-carousel-control-progress-duration: 5s;"
>
  <button class="tng-carousel-control">Asset 1</button>
  <button
    class="tng-carousel-control"
    style="--tng-carousel-control-progress-duration: 8s;"
  >
    Asset 2
  </button>
  <button class="tng-carousel-control">Asset 3</button>
</div>

Behavior Notes

• The progress fill runs only on .tng-carousel-control.is-active.
• The bar uses rested color for remaining track and active color for completed progress.
• Hover changes indicator thickness and hover track color for non-disabled items.
• Under reduced motion, active items render at full progress without animation.

Recipe

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Slide 1

Slide 2

Slide 3

Asset 1 Asset 2 Asset 3

source code

Accessibility

Use <button> for item controls so keyboard and focus behavior are native.

• Add meaningful button text (or aria-label when text is not visible).
• Keep the active button state synchronized with your carousel content.
• Mark the active item with aria-current="true" (or aria-current="step") when appropriate for your UX.