https://github.com/metafizzy/flickity-fade

Fade between Flickity slides
https://github.com/metafizzy/flickity-fade

Last synced: about 2 months ago
JSON representation

Fade between Flickity slides

• Host: GitHub
• URL: https://github.com/metafizzy/flickity-fade
• Owner: metafizzy
• Created: 2019-01-23T20:08:37.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-03-08T00:51:49.000Z (over 2 years ago)
• Last Synced: 2024-07-22T16:03:49.177Z (2 months ago)
• Language: JavaScript
• Size: 34.2 KB
• Stars: 62
• Watchers: 8
• Forks: 20
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/contributing.md

Awesome Lists containing this project

README

        
# 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

```

### 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



  ...



```


### 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) 🌈🐻