Add a README
This commit is contained in:
1 parent
a79d639017
commit
6bd456764e
1 file changed
+60
@@ -1,2 +1,62 @@
|
||||
# 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
|
||||
```
|
||||
Reference in new issue
Block a user