Carousel

Image and content carousel. One class — carousel — on the container. Semantic <figure> children.

Basic Carousel

Slide 1

Slide 2

Slide 3

<div class="carousel">
  <div class="viewport">
    <div class="track">
      <figure>
        <img src="slide1.jpg" alt="Description of slide 1">
        <figcaption>Slide 1</figcaption>
      </figure>
      <figure>
        <img src="slide2.jpg" alt="Description of slide 2">
        <figcaption>Slide 2</figcaption>
      </figure>
    </div>
  </div>
  <button class="control prev" aria-label="Previous slide"
          aria-controls="carousel-track" data-carousel-step="-1">‹</button>
  <button class="control next" aria-label="Next slide"
          aria-controls="carousel-track" data-carousel-step="1">›</button>
</div>

JavaScript Control

let current = 0;
document.querySelectorAll('[data-carousel-step]').forEach((button) => {
  button.addEventListener('click', () => {
    const track = document.getElementById(button.getAttribute('aria-controls'));
    const slides = track ? track.children.length : 0;
    if (!track || !slides) return;
    current = (current + Number(button.getAttribute('data-carousel-step')) + slides) % slides;
    track.style.transform = `translateX(-${current * 100}%)`;
  });
});

Accessibility

Add role="region" + aria-label="Image carousel" on the outer container
Each <figure> with an image needs a meaningful alt text
Pause auto-play on focus or hover — never auto-advance without user control
Provide visible slide count: "Slide 1 of 3" via aria-live="polite"

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Carousel component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.