flickity-fade

Fade between Flickity slides

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
flickity-fade
63122.0.0a year ago4 years agoMinified + gzip package size for flickity-fade in KB

Readme

Flickity fade
Fade between Flickity slides

Install

Add flickity-fade.css to you stylesheets and flickity-fade.js to your scripts.

Download

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