API

Methods

Methods are actions done by Flickity instances.

With jQuery, methods follow the jQuery UI pattern $carousel.flickity( 'methodName' /*, arguments */ ).

var $carousel = $('.carousel').flickity()
  .flickity('next')
  .flickity( 'select', 4 );

jQuery chaining is broken by methods that return values like getCellElements.

Vanilla JavaScript methods look like flickity.methodName( /* arguments */ ). Unlike jQuery methods, they cannot be chained together.

// vanilla JS
var flkty = new Flickity('.carousel');
flkty.next();
flkty.select( 3 );

Selecting slides

select

Select a slide.

// jQuery
$carousel.flickity( 'select', index, isWrapped, isInstant )

// vanilla JS
flkty.select( index, isWrapped, isInstant )

index Integer Zero-based index of the slide to select.

isWrapped Boolean Optional. If true, the last slide will be selected if at the first slide.

isInstant Boolean If true, immediately view the selected slide without animation. 

$('.button-group').on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'select', index );
});

Edit this demo or vanilla JS demo on CodePen 

// select cell instantly, without animation
$('.button-group').on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'select', index, false, true );
});

Edit this demo or vanilla JS demo on CodePen

previous

Select the previous slide.

// jQuery
$carousel.flickity( 'previous', isWrapped, isInstant )

// vanilla JS
flkty.previous( isWrapped, isInstant )

isWrapped Boolean Optional. If true, the last slide will be selected if at the first slide.

isInstant Boolean If true, immediately view the selected slide without animation. 

// previous
$('.button--previous').on( 'click', function() {
  $carousel.flickity('previous');
});
// previous wrapped
$('.button--previous-wrapped').on( 'click', function() {
  $carousel.flickity( 'previous', true );
});

Edit this demo or vanilla JS demo on CodePen

next

Select the next slide.

// jQuery
$carousel.flickity( 'next', isWrapped, isInstant )

// vanilla JS
flkty.next( isWrapped, isInstant )

isWrapped Boolean Optional. If true, the first slide will be selected if at the last slide.

isInstant Boolean If true, immediately view the selected slide without animation. 

// next
$('.button--next').on( 'click', function() {
  $carousel.flickity('next');
});
// next wrapped
$('.button--next-wrapped').on( 'click', function() {
  $carousel.flickity( 'next', true );
});

Edit this demo or vanilla JS demo on CodePen

selectCell

Select a slide of a cell. Useful for groupCells.

// jQuery
$carousel.flickity( 'selectCell', value, isWrapped, isInstant )

// vanilla JS
flkty.selectCell( value, isWrapped, isInstant )

value Integer or selector String Zero-based index OR selector string of the cell to select.

isWrapped Boolean Optional. If true, the last slide will be selected if at the first slide.

isInstant Boolean If true, immediately view the selected slide without animation. 

$('.button-group').on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'selectCell', index );
});

Edit this demo or vanilla JS demo on CodePen

You can select a cell with a selector string.

<div class="carousel">
  <div class="cell1"></div>
  <div class="cell2"></div>
  <div class="cell3"></div>
  ...
</div>

$carousel.flickity( 'selectCell', '.cell2' );

Edit this demo or vanilla JS demo on CodePen

Sizing and positioning

resize

Resize the carousel and re-position cells.

// jQuery
$carousel.flickity('resize')

// vanilla JS
flkty.resize()

$('.button--resize').on( 'click', function() {
  // expand carousel by toggling class
  $carousel.toggleClass('is-expanded')
    .flickity('resize');
});

.carousel { width: 50%; }
.carousel.is-expanded { width: 100%; }

.carousel.is-expanded .carousel-cell {
  height: 320px;
}

Edit this demo or vanilla JS demo on CodePen

If Flickity is initialized when hidden, like within a tab, trigger resize after it is shown so cells are properly measured and positioned.

$('.button').on( 'click', function() {
  $carousel.show()
    // resize after un-hiding Flickity
    .flickity('resize');
});

Edit this demo or vanilla JS demo on CodePen

reposition

Position cells at selected position. Trigger reposition after the size of a cell has been changed.

// jQuery
$carousel.flickity('reposition')

// vanilla JS
flkty.reposition()

$carousel.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
  if ( !cellElement ) {
    return;
  }
  $( cellElement ).toggleClass('is-expanded');
  $carousel.flickity('reposition');
});

Click cells to toggle size

Edit this demo or vanilla JS demo on CodePen

Adding and removing cells

prepend

Prepend elements and create cells to the beginning of the carousel.

// jQuery
$carousel.flickity( 'prepend', elements )

// vanilla JS
flkty.prepend( elements )

elements jQuery object, Array of Elements, Element, or NodeList 

$('.button').on( 'click', function() {
  var $cellElems = $('<div class="carousel-cell">...</div>');
  $carousel.flickity( 'prepend', $cellElems );
});
1
2
3

Edit this demo or vanilla JS demo on CodePen

append

Append elements and create cells to the end of the carousel.

// jQuery
$carousel.flickity( 'append', elements )

// vanilla JS
flkty.append( elements )

elements jQuery object, Array of Elements, Element, or NodeList 

$('.button').on( 'click', function() {
  var $cellElems = $('<div class="carousel-cell">...</div>');
  $carousel.flickity( 'append', $cellElems );
});
1
2
3

Edit this demo or vanilla JS demo on CodePen

insert

Insert elements into the carousel and create cells.

// jQuery
$carousel.flickity( 'insert', elements, index )

// vanilla JS
flkty.insert( elements, index )

elements jQuery object, Array of Elements, Element, or NodeList

index Integer Zero-based index to insert elements. 

$('.button').on( 'click', function() {
  var $cellElems = $('<div class="carousel-cell">...</div>');
  $carousel.flickity( 'insert', $cellElems, 1 );
});
1
2
3

Edit this demo or vanilla JS demo on CodePen

remove

Remove cells from carousel and remove elements from DOM.

// jQuery
$carousel.flickity( 'remove', elements )

// vanilla JS
flkty.remove( elements )

elements jQuery object, Array of Elements, Element, or NodeList 

$('.carousel').on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
  if ( cellElement ) {
    $carousel.flickity( 'remove', cellElement );
  }
});

Click cells to remove

1
2
3
4
5
6
7
8

Edit this demo or vanilla JS demo on CodePen

Player

Control autoPlay behavior.

Playing

Edit this demo or vanilla JS demo on CodePen

playPlayer

Starts auto-play.

Setting autoPlay will automatically start auto-play on initialization. You do not need to start auto-play with playPlayer.

// jQuery
$carousel.flickity('playPlayer')

// vanilla JS
flkty.playPlayer()

stopPlayer

Stops auto-play and cancels pause.

// jQuery
$carousel.flickity('stopPlayer')

// vanilla JS
flkty.stopPlayer()

pausePlayer

Pauses auto-play.

// jQuery
$carousel.flickity('pausePlayer')

// vanilla JS
flkty.pausePlayer()

unpausePlayer

Resumes auto-play if paused.

// jQuery
$carousel.flickity('unpausePlayer')

// vanilla JS
flkty.unpausePlayer()

Fullscreen

Fullscreen functionality requires the flickity-fullscreen package. It is not included in flickity.pkgd.js and must be installed separately.

viewFullscreen

Expand carousel to fullscreen.

// jQuery
$carousel.flickity('viewFullscreen')

// vanilla JS
flkty.viewFullscreen();

$('.button').on( 'click', function() {
  $carousel.flickity('viewFullscreen');
});

Edit this demo or vanilla JS demo on CodePen

exitFullscreen

Collapse carousel from fullscreen back to normal size & position.

// jQuery
$carousel.flickity('exitFullscreen')

// vanilla JS
flkty.exitFullscreen();

toggleFullscreen

Expand or collapse carousel fullscreen view.

// jQuery
$carousel.flickity('toggleFullscreen')

// vanilla JS
flkty.toggleFullscreen();

Utilities

destroy

Remove Flickity functionality completely. destroy will return the element back to its pre-initialized state.

// jQuery
$carousel.flickity('destroy')

// vanilla JS
flkty.destroy()

var $carousel = $('.carousel').flickity();
var isFlickity = true;
// toggle Flickity on/off
$('.button--toggle').on( 'click', function() {
  if ( isFlickity ) {
    // destroy Flickity
    $carousel.flickity('destroy');
  } else {
    // init new Flickity
    $carousel.flickity();
  }
  isFlickity = !isFlickity;
});

Edit this demo or vanilla JS demo on CodePen

reloadCells

Re-collect all cell elements in flickity-slider.

// jQuery
$carousel.flickity('reloadCells')

// vanilla JS
flkty.reloadCells()

getCellElements

Get the elements of the cells.

// jQuery
var cellElements = $carousel.flickity('getCellElements')

// vanilla JS
var cellElements = flkty.getCellElements()

cellElements Array of Elements

jQuery.fn.data('flickity')

Get the Flickity instance from a jQuery object. Flickity instances are useful to access Flickity properties.

var flkty = $('.carousel').data('flickity')
// access Flickity properties
console.log( 'carousel at ' + flkty.selectedIndex )

Flickity.data()

Get the Flickity instance via its element. Flickity.data() is useful for getting the Flickity instance in JavaScript, after it has been initalized in HTML.

var flkty = Flickity.data( element )

element Element or Selector String

flkty Flickity 

<!-- init Flickity in HTML -->
<div class="main-carousel" data-flickity>...</div>

// jQuery
// pass in the element, $element[0], not the jQuery object
var flkty = Flickity.data( $('.main-carousel')[0] )
// vanilla JS
var carousel = document.querySelector('.main-carousel')
var flkty = Flickity.data( carousel )
// using a selector string
var flkty = Flickity.data('.main-carousel')

Flickity.setJQuery()

Set jQuery for internal use in Flickity. Useful for using Flickity with jQuery and Webpack or Browserify.

Flickity.setJQuery( $ )

$ jQuery 

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({...});

Properties

Properties are accessed only on Flickity instances. If you initialized Flickity with jQuery, use .data('flickity') to get the instance.

// init Flickity with jQuery
var $carousel = $('.carousel').flickity();
// get instance
var flkty = $carousel.data('flickity');
// access properties
console.log( flkty.selectedIndex, flkty.selectedElement );

selectedIndex

Zero-based index of the selected slide.

flkty.selectedIndex

selectedElement

The selected cell element. For groupCells, the first cell element in the selected slide.

flkty.selectedElement

selectedElements

An array of elements in the selected slide. Useful for groupCells.

flkty.selectedElements
// -> array of elements

cells

The array of cells. Use cells.length for the total number of cells.

flkty.cells
// -> array of cells
flkty.cells.length
// -> total number of cells

slides

The array of slides. Useful for groupCells. A slide contains multiple cells. If groupCells is disabled, then each slide is a cell, so they are one in the same.

flkty.slides
// -> array of slides
flkty.slides.length
// -> total number of slides