Extras

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( 'cellSelect', 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

Extra demos

Browser support

Flickity supports IE8+, Android 2.3+, iOS Safari 5+, and all modern browsers.

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() {
      // make Flickity a jQuery plugin
      $.bridget( '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 and asNavFor 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');
require('jquery-bridget');
var Flickity = require('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 and asNavFor code. You can install and require the flickity-imagesloaded and flickity-as-nav-for packages separately.

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

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

In your config file, webpack.config.js, add these resolve aliases.

module.exports = {
  resolve: {
    alias: {
      'eventEmitter/EventEmitter': 'wolfy87-eventemitter/EventEmitter',
      'get-style-property/get-style-property': 'desandro-get-style-property/get-style-property',
      'matches-selector/matches-selector': 'desandro-matches-selector/matches-selector',
      'classie/classie': 'desandro-classie/classie'
    }
  }
};

(This hack is required because of an issue with how Webpack loads dependencies. +1 this issue on GitHub to help get this issue addressed.)

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 and jQuery plugin functionality need to be installed separately, similar to using Browserify.

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 or subscribing to features you’d like to see added.

Help improve these docs. Open an issue or pull request.