Snappy-Carousel

Snappy is yet another carousel library. Its goal is to be as lightweight and performant as possible.

It does not implement every feature found in other carousel libraries. Instead, it relies on native CSS scroll snapping and adds as little on top as possible.

Mouse-drag behavior closely follows native touch scrolling in the browser, including inertia and snapping to a slide. Thus dragging with the mouse feels pretty identical to native scrolling on a touch device or using a trackpad.

File	Size	Ggzip	Brotli
snappy.css	0.91 kB	0.43 kB	0.36 kB
snappy.js	7.65 kB	2.20 kB	1.95 kB

Usage

Only CSS for a basic scroll container

You can use Snappy without JavaScript. This gives you a simple CSS-only scroll container with snapping slides.

<!-- include the stylesheet in <head> -->
<link rel="stylesheet" href="dist/snappy.css">

<!-- add this structure -->
<section class="snappy-carousel" aria-labelledby="carousel-heading">
    <h1 id="carousel-heading" class="visuallyhidden">Carousel Heading</h1>
    <ul class="scroll-container">
        <li class="slide">1</li>
        <li class="slide">2</li>
        ...
    </ul>
</section>

Snappy is mostly unstyled, leaving the appearance up to you.
For inspiration, see the complete example.

Options

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap add data attribites to the carousel container to change the default behavior:

<!--
Options
-------

data-direction="x" (default)
data-direction="y" 

data-snap-stop="always"
data-snap-stop="normal" (default)

data-snap-align="center" (default)
data-snap-align="start"
data-snap-align="end"
-->
<section class="snappy-carousel" aria-labelledby="carousel-heading"
    data-direction="y" 
    data-snap-align="start">
    <h1 id="carousel-heading" class="visuallyhidden">Carousel Heading</h1>

    <ul class="scroll-container">
        <li class="slide">1</li>
        <li class="slide">2</li>
        ...
    </ul>
</section>

Add JavaScript for a carousel

Including the JavaScript adds the following features:

• Previous and next buttons
• Pagination
• Mouse dragging

<section class="snappy-carousel" aria-labelledby="carousel-heading"
    data-direction="y" 
    data-snap-align="start">
    <h1 id="carousel-heading" class="visuallyhidden">Carousel Heading</h1>
    <ul class="scroll-container">
        <li class="slide">1</li>
        <li class="slide">2</li>
        ...
    </ul>

    <button class="prev">❮</button>
    <button class="next">❯</button>
    <ul class="pagination"></ul>
</section>

<script src="dist/snappy.js" defer></script>

Development

Install the development dependencies and build the minified JavaScript and CSS files into dist:

npm install
npm run build

To rebuild the files whenever a source file changes, run:

npm run watch