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@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.

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

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

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

Webpack

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

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

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

By Metafizzy 🌈🐻