116 lines
2.9 KiB
Markdown
116 lines
2.9 KiB
Markdown
# 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 | gzip |
|
||
| ---------- | ------: | -----: |
|
||
| snappy.js | 7.5k kB | 2.2 KB |
|
||
| snappy.css | 0.9 B | 0.4 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.
|
||
|
||
```html
|
||
<!-- 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](index.html).
|
||
|
||
|
||
### 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:
|
||
|
||
```html
|
||
<!--
|
||
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
|
||
|
||
```html
|
||
<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`:
|
||
|
||
```sh
|
||
npm install
|
||
npm run build
|
||
```
|
||
|
||
To rebuild the files whenever a source file changes, run:
|
||
|
||
```sh
|
||
npm run watch
|
||
``` |