115 lines
2.6 KiB
Markdown
115 lines
2.6 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 |
|
||
| ---------- | ------: |
|
||
| snappy.js | 6,17 kB |
|
||
| snappy.css | 1,11 kB |
|
||
|
||
|
||
## Usage
|
||
|
||
|
||
### CSS only 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 -->
|
||
<div class="snappy-carousel">
|
||
<div class="scroll-container">
|
||
<div class="slide">1</div>
|
||
<div class="slide">2</div>
|
||
...
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
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-gap="var(--size-1)"
|
||
data-gap="10px"
|
||
data-gap="1rem"
|
||
|
||
data-snap-stop="always"
|
||
data-snap-stop="normal" (default)
|
||
|
||
data-snap-align="center" (default)
|
||
data-snap-align="start"
|
||
data-snap-align="end"
|
||
-->
|
||
<div class="snappy-carousel"
|
||
data-gap="1rem"
|
||
data-snap-align="start">
|
||
|
||
<div class="scroll-container">
|
||
<div class="slide">1</div>
|
||
<div class="slide">2</div>
|
||
...
|
||
</div>
|
||
</div>
|
||
|
||
|
||
### Add JavaScript for a carousel
|
||
|
||
Including the JavaScript adds the following features:
|
||
|
||
- Previous and next buttons
|
||
- Pagination
|
||
- Mouse dragging
|
||
|
||
```html
|
||
<div class="snappy-carousel" data-gap="1rem" data-snap-align="start">
|
||
<div class="scroll-container">
|
||
<div class="slide">1</div>
|
||
<div class="slide">2</div>
|
||
...
|
||
</div>
|
||
|
||
<button class="prev">❮</button>
|
||
<button class="next">❯</button>
|
||
<div class="pagination"></div>
|
||
</div>
|
||
|
||
<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
|
||
``` |