62 lines
1.4 KiB
Markdown
62 lines
1.4 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.
|
|
|
|
| File | Size |
|
|
| ---------- | ------: |
|
|
| snappy.js | 6,17 kB |
|
|
| snappy.css | 1,11 kB |
|
|
|
|
|
|
## Usage
|
|
|
|
### CSS only
|
|
|
|
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 id="demo-carousel" class="snappy-carousel">
|
|
<div class="snappy-slide"></div>
|
|
<div class="snappy-slide"></div>
|
|
<div class="snappy-slide"></div>
|
|
...
|
|
</div>
|
|
```
|
|
|
|
Snappy is mostly unstyled, leaving the appearance up to you. For inspiration, see the [example](index.html).
|
|
|
|
### Add JavaScript
|
|
|
|
Including the JavaScript adds the following features:
|
|
|
|
- Previous and next buttons
|
|
- Pagination
|
|
- Mouse dragging
|
|
|
|
```html
|
|
<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
|
|
``` |