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

Alpine Snap Slider

Add slide

Powered by [x-snap-slider] Or view the Custom Element version

Meet x-snap-slider, an Alpine.js plugin that enhances native CSS scroll snap sliders. Wrap the x-snap-slider directive around your scroll container to add features like next/prev buttons and pagination.

See the full details on fylgja.dev.

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