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
• flickity-fade.js

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity-fade@1/flickity-fade.css">

<!-- JS -->
<script src="https://unpkg.com/flickity-fade@1/flickity-fade.js"></script>

Package managers

This package is registered as flickity-fade.

• npm: npm install flickity-fade
• Yarn: yarn add flickity-fade
• Bower: bower install flickity-fade

Usage

Enable fade behavior by setting fade: true in Flickity options.

// jQuery
var $carousel = $('.carousel').flickity({
  fade: true,
});

// vanilla JS
var flkty = new Flickity( '.carousel', {
  fade: true,
});

<!-- HTML -->
<div class="carousel" data-flickity='{ "fade": true }'>
  ...
</div>

Webpack & Browserify

var Flickity = require('flickity-fade');

var flkty = new Flickity( '.carousel', {
  fade: true,
});

RequireJS

requirejs( [ 'path/to/flickity-fade' ], function( Flickity ) {
  var flkty = new Flickity( '.carousel', {
    fade: true,
  });
});

---

This feature spent four years in feature-request purgatory. Never give up.

By Metafizzy 🌈🐻