Skip to contentSkip to footer
Brown and green plant in close up photography

Photo: Nicole Geri

Track

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.

HTML
<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>
Figure 1
Figure 1 notes
LinesDetails
2-3

The .track class is required. It wraps the entire carousel component.

The aria-labelledby attribute is recommended. It links the carousel to its title for screen readers.

6

Add a heading for the carousel. Use .screen-reader-only when the heading should be available to screen readers without appearing visually.

8

The .track__container class is required. It contains the carousel panels.

10-24

The .track__panels class is required. This <ul> holds the carousel’s panels.

Each panel uses the .track__panel class.

The .gap-2 utility class is optional and adds space between the panels.

28

The .track__controls class is optional. It holds the navigation buttons.

30-35

The .track__prev button is optional. It moves to the previous panel.

The data-track-prev attribute is required for JavaScript to detect the button.

The aria-label attribute is recommended to provide context for screen readers.

37

The .track__pagination class is optional. It holds pagination, which is generated dynamically with JavaScript.

The data-track-pagination attribute is required for JavaScript to locate the pagination container.

39-44

The .track__next button is optional. It moves to the next panel.

The data-track-next attribute is required for JavaScript to detect the button.

The aria-label attribute is recommended to support screen readers.

Responsive Columns

To change the number of visible panels per page, add track--column-{x} to the .track element. Replace {x} with the number of columns (from 1 to 8) you want.

To adjust for specific breakpoints, add a breakpoint modifier. For example, track--column-3--lg displays three columns on large screens.

Featured Content

    HTML
    <div class="track track--column-3--lg">
      ...
    </div>
    Figure 2

    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 two columns with peeking at the extra-large breakpoint.

    Featured Content

      HTML
      <div class="track track--column-2--xl track--peeking--xl">
        ...
      </div>
      Figure 3

      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.

      Backdrop

      Grid