Track • Natura11y
Jump to main contentJump to website footer
Brown and green plant in close up photography

Photo by 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.

Featured Content

    
        <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://via.placeholder.com/1500x750?text=One" alt="Placeholder" />
                    </li>
                    <li class="track__panel">
                        <img src="https://via.placeholder.com/1500x750?text=Two" alt="Placeholder" />
                    </li>
                    <li class="track__panel">
                        <img src="https://via.placeholder.com/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"
                    aria-label="Previous Slide">
                    <span class="icon icon-arrow-left" aria-hidden="true"></span>
                </button>

                <ul class="track__pagination"></ul>

                <button
                    class="track__next button button--icon-only"
                    aria-label="Next Slide">
                    <span class="icon icon-arrow-right" aria-hidden="true"></span>
                </button>

            </div>

        </section>
    Figure 1
    Line #Details
    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

    Use the h3 element with the .screen-reader-only class to provide a title for screen readers.

    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.

    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-34

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

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

    36

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

    38-42

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

    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 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>
      Figure 2

      Panel Peeking

      Panel peeking shows a small part of the next or previous panel, helping users know there is more content to explore in either direction. To enable panel peeking, add the .track--peeking class to your .track element.

      Featured Content

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