Snap Carousel

Snap carousel is a lightweight vanilla js library for creating carousels. It is based on the recent web technologies that are custom elements / scroll-snap / scroll-padding.

Basic example

Every available options 
<snap-carousel
    displayed="2"
    per-page="1"
    nav
    controls
    stop
    gap="16"
    padding="16"
    behavior="smooth"
    loop
    autoplay="3000"
    use-pause
>
</snap-carousel>

Snap stop

<snap-carousel
    displayed="2"
    gap="16"
    nav
    controls
    stop
>
</snap-carousel>

Padding

<snap-carousel
    displayed="2"
    per-page="2"
    gap="2.5vw"
    padding="5vw"
    controls
    nav
>
</snap-carousel>

Custom Buttons / Pagination / Pager

<snap-carousel
    displayed="2"
    gap="16"
    controls
    nav
    pager
>
<button slot="prev-buttons" direction="prev" modifier="2">SUPER PREV (-2)</button>
<button slot="prev-buttons" direction="prev">PREV</button>
<button slot="next-buttons">NEXT</button>
<button slot="next-buttons" modifier="2">SUPER NEXT (+2)</button>

<div slot="pagination" class="custom-nav"></div>

</snap-carousel>

Responsive

<snap-carousel gap="16" controls nav
    responsive='[{"breakpoint": 1024, "config": {"controls": true, "displayed": 2, "perPage": 2, "loop": true} }]'
>
</snap-carousel>