Carousel Component

Carousel Component

Axiom01's carousel component is a flexible, responsive slideshow for cycling through a series of images or content. It's designed to be accessible and easily integrated into your web projects.

Basic Carousel

Code Example

<div class="carousel" role="region" aria-label="Image carousel">
<div class="slides">
    <div class="slide" role="group" aria-label="Slide 1 of 3">
        <img src="path/to/image1.jpg" alt="Description for first slide">
        <div class="caption">
            <h5>First slide label</h5>
            <p>...</p>
        </div>
    </div>
    <div class="slide" role="group" aria-label="Slide 2 of 3">
        <img src="path/to/image2.jpg" alt="Description for second slide">
        <div class="caption">
            <h5>Second slide label</h5>
            <p>...</p>
        </div>
    </div>
    <div class="slide" role="group" aria-label="Slide 3 of 3">
        <img src="path/to/image3.jpg" alt="Description for third slide">
        <div class="caption">
            <h5>Third slide label</h5>
            <p>...</p>
        </div>
    </div>
</div>
<div class="controls">
    <button aria-label="Previous slide">&lt;</button>
    <button aria-label="Next slide">&gt;</button>
</div>
<ul class="indicators">
    <li class="active" aria-label="Go to slide 1"></li>
    <li aria-label="Go to slide 2"></li>
    <li aria-label="Go to slide 3"></li>
</ul>
</div>

Usage Guidelines

The .carousel class defines the main container. Inside, .slides holds individual .slide elements, each containing an <img> and an optional .caption. Navigation is provided by .controls with buttons and .indicators for direct slide selection.

For accessibility, ensure role="region" and aria-label are used on the main carousel container, role="group" and aria-label on each slide, and aria-label on control buttons and indicator list items.