Introduction
Introducing Track, Naturally's accessible carousel component. It gives you full control with responsive panels that switch between single and multi-panel views at different screen sizes.
Tab navigation highlights only visible, interactive elements, ensuring smooth navigation for keyboard users.
Users can move between slides using arrow keys when focused on the "previous" or "next" buttons. This keeps navigation inside the carousel.
The carousel uses ARIA live regions to announce the current page. This keeps screen reader users updated on page changes in real-time.
Respects prefers-reduced-motion — smooth scrolling between panels is disabled when this preference is active.
<section
class="track"
aria-labelledby="carousel-heading"
>
<h3 id="carousel-heading" class="screen-reader-only">Section Title</h3>
<div class="track__container">
<ul class="track__panels gap-2">
<li class="track__panel">
<img src="https://placehold.co/1500x750?text=One" alt="Placeholder" />
</li>
<li class="track__panel">
<img src="https://placehold.co/1500x750?text=Two" alt="Placeholder" />
</li>
<li class="track__panel">
<img src="https://placehold.co/1500x750?text=Three" alt="Placeholder" />
</li>
<!-- Add more panels as needed -->
</ul>
</div>
<div class="track__controls margin-y-3">
<button
class="track__prev button button--icon-only"
data-track-prev
aria-label="Previous Slide">
<span class="icon icon-arrow-left" aria-hidden="true"></span>
</button>
<ul class="track__pagination" data-track-pagination></ul>
<button
class="track__next button button--icon-only"
data-track-next
aria-label="Next Slide">
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</section>
| Line # | Details |
|---|---|
| 2-3 | The The |
| 6 | Use the |
| 8 | The |
| 10-24 | The The |
| 28 | The |
| 30-35 | The The The |
| 37 | The The |
| 39-44 | The The The |
Responsive Columns
To change the number of visible panels per page, add track--column-{x} to the .track selector. Replace {x} with the number of columns (from 1 to 8) you want.
To adjust for specific breakpoints, add a breakpoint modifier (e.g., track--column-3--lg) displays 3 columns on large screens.
Featured Content
<div class="track 👉 track--column-3--lg">
...
</div>
Panel Peeking
Panel peeking reveals a sliver of the next and previous panels, giving users a visual cue that more content exists in either direction.
Like responsive columns, peeking supports breakpoint modifiers. Use track--peeking--{bp} to enable peeking only at a specific breakpoint and above. This lets you combine a single-column, no-peeking layout on mobile with a multi-column peeking layout on larger screens.
The example below is a single panel with no peeking on small screens, then switches to three columns with peeking at the large breakpoint.
Featured Content
<div class="track 👉 track--column-2--xl track--peeking--xl">
...
</div>
When peeking is active, the track bleeds slightly outside its container's padding. Add track--peeking-edge--{bp} at the same breakpoint to apply a negative margin that cancels out the bleed, keeping the track visually flush with the surrounding layout.
