<script src="//unpkg.com/@fylgja/snap-slider" defer></script>
 
<snap-slider>
    <div data-track class="snap scroll-x flex gap">
        Slides...
    </div>
</snap-slider>

Snap Slider Title

This slider uses the same code as the example above, but additionally includes the auto-pager modifier. This modifier automatically creates the pagination dots displayed below the slider.

If you wish to create your own pagination controls, add the [data-pager] attribute to your pager container element. Then, ensure each individual pager item (like an anchor link <a> or button <button>) targets the corresponding slide's ID using either its href attribute (for links) or a [data-target-id] attribute.

Furthermore, the buttons for handling navigation to the next or previous slide are straightforward. Simply use a button element with the [data-prev] attribute for the "previous" functionality, and another with the [data-next] attribute for the "next" functionality.

Any other code presented in the examples primarily handles visual styling. Snap Slider is designed as a CSS-first component, which is then progressively enhanced with JavaScript to enable features like navigation and pagination.

This JavaScript implementation follows design principles and options similar to the upcoming native CSS Only Carousel features, as detailed in this article on the Chrome Developers Blog.

More Slider/Carousel examples are found on the UI Components on Fylgja.dev