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

RequireJS

Flickity supports RequireJS.

You can require flickity.pkgd.js.

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

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()
      $('.carousel').flickity({...});
    }
  );
});

Or, you can manage dependencies with Bower. Set baseUrl: "bower_components/" and set a config path for all your application code.

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

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

You can require Bower dependencies and use Flickity as a jQuery plugin with jQuery Bridget.

requirejs.config({
  baseUrl: '../bower_components',
  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()
    $('.carousel').flickity({...});
});

As a stand-alone package, Flickity does not include imagesLoaded, asNavFor, and bgLazyLoad code. You can require these packages separately.

requirejs( [
    'flickity-imagesloaded/flickity-imagesloaded',
    'flickity-as-nav-for/as-nav-for'
  ],
  function( Flickity ) {
    // now use imagesLoaded and asNavFor
    var flkty = new Flickity( '.carousel-a', {
      imagesLoaded: true,
      asNavFor: '.carousel-b'
    });
});

Browserify

Flickity works with Browserify. Install Flickity with npm.

npm install flickity

var Flickity = require('flickity');

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

To use Flickity as a jQuery plugin with Browserify, you need to call jQuery Bridget.

npm install jquery-bridget

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

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

As a stand-alone package, Flickity does not include imagesLoaded, asNavFor, and bgLazyLoad code. You can install and require the flickity-imagesloaded, flickity-as-nav-for, and flickity-bg-lazyload packages separately.

npm install flickity-imagesloaded
npm install flickity-as-nav-for
npm install flickity-bg-lazyload

var Flickity = require('flickity-imagesloaded');
require('flickity-as-nav-for');

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

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

imagesLoaded, asNavFor, bgLazyLoad and jQuery plugin functionality need to be installed separately, similar to using Browserify.

Browser support

Flickity v2 supports IE10+, Android 4+, Safari for iOS 5+, Firefox 16+, and Chrome 12+.

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 +1 reaction to features you’d like to see added.