Extras

• Custom navigation UI
• Extra demos
• Browser support
• RequireJS
• Browserify
• Webpack
• Issues
• Reduced test cases
• Submitting issues
• Feature requests

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');
});

Extra demos

• Image carousel with fancy selected style
• Setting image caption or with vanilla JS
• Select cell on staticClick or with vanilla JS
• Vertical scrollable navigation on the side
• Set initial focus on Flickity carousel or with vanilla JS, so that carousel can be keyboard navigated on initial page load
• Previous & next buttons in top right corner
• Adding is-previous and is-next cell classes
• Fade in carousel for no Flash Of Unstyled Content (FOUC) or with vanilla JS
• Disabling & enabling dragging or with vanilla JS
• Set options at media queries
• Slide progress bar

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': 'desandro-get-style-property',
      'matches-selector': 'desandro-matches-selector',
      'classie': 'desandro-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.

• A reduced test case clearly demonstrates the bug or issue.
• It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
• A link to your production site is not a reduced test case.

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.