flickity-fade
Version:
Fade between Flickity slides
70 lines (48 loc) • 1.28 kB
Markdown
# Flickity fade
_Fade between Flickity slides_
## Install
Add `flickity-fade.css` to you stylesheets and `flickity-fade.js` to your scripts.
### Download
+ [flickity-fade.css](https://unpkg.com/flickity-fade@2/flickity-fade.css)
+ [flickity-fade.js](https://unpkg.com/flickity-fade@2/flickity-fade.js)
### CDN
``` html
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity-fade@2/flickity-fade.css">
<!-- JS -->
<script src="https://unpkg.com/flickity-fade@2/flickity-fade.js"></script>
```
### Package managers
+ npm: `npm install flickity-fade`
+ Yarn: `yarn add flickity-fade`
## Usage
Enable fade behavior by setting `fade: true` in Flickity options.
``` js
// jQuery
let $carousel = $('.carousel').flickity({
fade: true,
});
```
``` js
// vanilla JS
let flkty = new Flickity( '.carousel', {
fade: true,
});
```
``` html
<!-- HTML -->
<div class="carousel" data-flickity='{ "fade": true }'>
...
</div>
```
### Webpack
``` js
const Flickity = require('flickity');
require('flickity-fade');
let flkty = new Flickity( '.carousel', {
fade: true,
});
```
---
This feature spent [four years in feature-request purgatory](https://github.com/metafizzy/flickity/issues/26). _Never give up._
By [Metafizzy](https://metafizzy.co) 🌈🐻