Extras

Extra demos

Custom navigation UI

With the Flickity API, you can build custom carousel navigation UI.

// init Flickity
var $carousel = $('.carousel').flickity({
  prevNextButtons: false,
  pageDots: false
});
// Flickity instance
var flkty = $carousel.data('flickity');
// elements
var $cellButtonGroup = $('.button-group--cells');
var $cellButtons = $cellButtonGroup.find('.button');

// update selected cellButtons
$carousel.on( 'select.flickity', function() {
  $cellButtons.filter('.is-selected')
    .removeClass('is-selected');
  $cellButtons.eq( flkty.selectedIndex )
    .addClass('is-selected');
});

// select cell on button click
$cellButtonGroup.on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'select', index );
});
// previous
$('.button--previous').on( 'click', function() {
  $carousel.flickity('previous');
});
// next
$('.button--next').on( 'click', function() {
  $carousel.flickity('next');
});

Edit this demo or vanilla JS demo on CodePen

Module loaders

Webpack

Install Flickity with npm.

npm install flickity

You can then require('flickity').

// main.js
var Flickity = require('flickity');

var flkty = new Flickity( '.carousel', {
  // options...
});

Run webpack.

webpack main.js bundle.js

Install and require add-on features for imagesLoaded, asNavFor, fullscreen, bgLazyLoad, and hash.

npm install flickity-imagesloaded
npm install flickity-fullscreen

var Flickity = require('flickity');
require('flickity-imagesloaded');
require('flickity-fullscreen');

// now use imagesLoaded and fullscreen
var flkty = new Flickity( '.carousel', {
  imagesLoaded: true,
  fullscreen: true,
});

To use Flickity as a jQuery plugin with Webpack, you need to call jQuery Bridget and Flickity.setJQuery().

npm install jquery-bridget

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');

// make Flickity a jQuery plugin
Flickity.setJQuery( $ );
jQueryBridget( 'flickity', Flickity, $ );
// now you can use $().flickity()
var $carousel = $('.carousel').flickity({...});

Browserify

Follow Webpack instructions. Then run browserify.

browserify main.js -o bundle.js

RequireJS

Flickity supports RequireJS.

You can require flickity.pkgd.js.

requirejs( [
  'path/to/flickity.pkgd.js',
], function( Flickity ) {
  var flkty = new Flickity( '.carousel', {...});
});

Install and require add-on features for imagesLoaded, asNavFor, fullscreen, bgLazyLoad, and hash.

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

To use Flickity as a jQuery plugin with RequireJS and flickity.pkgd.js, you need to call jQuery Bridget.

// require the require function
requirejs( [ 'require', 'jquery', 'path/to/flickity.pkgd.js' ],
  function( require, $, Flickity ) {
    // require jquery-bridget, it's included in flickity.pkgd.js
    require( [ 'jquery-bridget/jquery-bridget' ],
    function( jQueryBridget ) {
      // make Flickity a jQuery plugin
      jQueryBridget( 'flickity', Flickity, $ );
      // now you can use $().flickity()
      var $carousel = $('.carousel').flickity({...});
    }
  );
});

Or, you can manage dependencies with npm or Bower. Set baseUrl to the packages folder and set a config path for all your application code.

requirejs.config({
  baseUrl: 'node_modules/',
  paths: {
    app: '../'
  }
});

requirejs( [
  'flickity/js/index',
  'app/my-component.js'
], function( Flickity, myComp ) {
  var flkty = new Flickity( '.carousel', {...});
});

To use Flickity as a jQuery plugin with RequireJS and a package manager, you need to install and call jQuery Bridget.

requirejs.config({
  baseUrl: 'node_modules/',
  paths: {
    jquery: 'jquery/jquery'
  }
});

requirejs( [
    'jquery',
    'flickity/js/index',
    'jquery-bridget/jquery-bridget'
  ],
  function( $, Flickity ) {
    // make Flickity a jQuery plugin
    $.bridget( 'flickity', Flickity, $ );
    // now you can use $().flickity()
    var $carousel = $('.carousel').flickity({...});
});

Browser support

Flickity v2.1 supports Chrome 33+, Safari 9+ (mobile & desktop), IE11+, Edge 12+, and Firefox 23+.

For IE8+ and Android 2.3+ support, try Flickity v1.

Upgrading from v1

Flickity v2 dropped browser support for IE8, IE9, and Android 2.3. Nearly all options, methods, and code for Flickity v1 is backwards compatibile with Flickity v2.

Breaking changes

Compatible changes

New features

Issues

Reduced test cases

Creating a reduced test case is the best way to debug problems and report issues. Read CSS Tricks on why they’re so great.

Create a reduced test case for Flickity by forking any one of the CodePen demos from these docs.

Creating a reduced test case is the best way to get your issue addressed. They help you point out the problem. They help us debug the problem. They help others understand the problem.

Submitting issues

Report issues on GitHub. Make sure to include a reduced test case. Without a reduced test case, your issue may be closed.

Feature requests

Help us select new features by looking over requested features on the GitHub issue tracker and adding your 👍 reaction to features you’d like to see added.