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: getCellElements, on, off.

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 cells

select

Select a cell.

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

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

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

isInstant Boolean If true, immediately view the selected cell 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

Select the previous cell.

// jQuery
$carousel.flickity( 'previous', isWrapped )
// vanilla JS
flkty.previous( isWrapped )

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

// 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

Select the next cell.

// jQuery
$carousel.flickity( 'next', isWrapped )
// vanilla JS
flkty.next( isWrapped )

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

// 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

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

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

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

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

Edit this demo or vanilla JS demo on CodePen

Player

Control autoPlay behavior.

Playing

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()

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 js-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')

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

The selected index.

flkty.selectedIndex

selectedElement

The selected cell element.

flkty.selectedElement

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

Events

jQuery event binding

Bind events with jQuery with standard jQuery event methods .on(), .off(), and .one().

// jQuery
function listener(/* parameters */) {
  console.log('eventName happened');
}
// bind event listener
$carousel.on( 'eventName', listener );
// unbind event listener
$carousel.off( 'eventName', listener );
// bind event listener to trigger once. note ONE not ON
$carousel.one( 'eventName', function() {
  console.log('eventName happened just once');
});

Vanilla JS event binding

Bind events with vanilla JS with .on(), .off(), and .once() methods.

// vanilla JS
function listener(/* parameters */) {
  console.log('eventName happened');
}
// bind event listener
flkty.on( 'eventName', listener );
// unbind event listener
flkty.off( 'eventName', listener );
// bind event listener to trigger once. note ONCE not ONE or ON
flkty.once( 'eventName', function() {
  console.log('eventName happened just once');
});

Events demo

Play around with this carousel to see how events are triggered.

Time	Event

cellSelect

Triggered when a cell is selected.

// jQuery
$carousel.on( 'cellSelect', function() {
  console.log( 'Flickity select ' + flkty.selectedIndex )
})
// vanilla JS
flkty.on( 'cellSelect', function() {...})

Edit this demo or vanilla JS demo on CodePen

settle

Triggered when the slider is settled at its end position.

// jQuery
$carousel.on( 'settle', function() {
  console.log( 'Flickity settled at ' + flkty.selectedIndex )
})
// vanilla JS
flkty.on( 'settle', function() {...})

Edit this demo or vanilla JS demo on CodePen

dragStart

Triggered when dragging starts and the slider starts moving.

// jQuery
$carousel.on( 'dragStart', function( event, pointer ) {...})
// vanilla JS
flkty.on( 'dragStart', function( event, pointer ) {...})

event Event Original event object, like mousedown, touchstart, or pointerdown.

pointer Event or Touch The event object that has .pageX and .pageY.

Edit this demo or vanilla JS demo on CodePen

dragMove

Triggered when dragging moves and the slider moves.

// jQuery
$carousel.on( 'dragMove', function( event, pointer, moveVector ) {...})
// vanilla JS
flkty.on( 'dragMove', function( event, pointer, moveVector ) {...})

event Event Original event object, like mousemove, touchmove, or pointermove.

pointer Event or Touch The event object that has .pageX and .pageY.

moveVector Object How far the pointer has moved from its start position { x: 20, y: -30 }.

Edit this demo or vanilla JS demo on CodePen

dragEnd

Triggered when dragging ends.

// jQuery
$carousel.on( 'dragEnd', function( event, pointer ) {...})
// vanilla JS
flkty.on( 'dragEnd', function( event, pointer ) {...})

event Event Original event object, like mouseup, touchend, or pointerup.

pointer Event or Touch The event object that has .pageX and .pageY.

Edit this demo or vanilla JS demo on CodePen

pointerDown

Triggered when the user's pointer (mouse, touch, pointer) presses down.

// jQuery
$carousel.on( 'pointerDown', function( event, pointer ) {...})
// vanilla JS
flkty.on( 'pointerDown', function( event, pointer ) {...})

event Event Original event object, like mousedown, touchstart, or pointerdown.

pointer Event or Touch The event object that has .pageX and .pageY.

Edit this demo or vanilla JS demo on CodePen

pointerMove

Triggered when the user's pointer moves.

// jQuery
$carousel.on( 'pointerMove', function( event, pointer, moveVector ) {...})
// vanilla JS
flkty.on( 'pointerMove', function( event, pointer, moveVector ) {...})

event Event Original event object, like mousemove, touchmove, or pointermove.

pointer Event or Touch The event object that has .pageX and .pageY.

moveVector Object How far the pointer has moved from its start position { x: 20, y: -30 }.

Edit this demo or vanilla JS demo on CodePen

pointerUp

Triggered when the user's pointer unpresses.

// jQuery
$carousel.on( 'pointerUp', function( event, pointer ) {...})
// vanilla JS
flkty.on( 'pointerUp', function( event, pointer ) {...})

event Event Original event object, like mouseup, touchend, or pointerup.

pointer Event or Touch The event object that has .pageX and .pageY.

Edit this demo or vanilla JS demo on CodePen

staticClick

Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging.

click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Flickity's staticClick event resolves this, as it is triggered when the user has not dragged.

// jQuery
$carousel.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {...})
// vanilla JS
flkty.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {...})

event Event Original event object.

pointer Event or Touch The event object that has .pageX and .pageY.

cellElement Element If a cell was clicked, the element.

cellIndex Integer If a cell was clicked, the cell’s zero-based index.

Use the cellElement and cellIndex parameters to detect what cell was clicked.

$carousel.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
  // dismiss if cell was not clicked
  if ( !cellElement ) {
    return;
  }
  // change cell background with .is-clicked
  $carousel.find('.is-clicked').removeClass('is-clicked');
  $( cellElement ).addClass('is-clicked');
  $logger.text( 'Cell ' + ( cellIndex + 1 )  + ' clicked' );
});

Click cells

Edit this demo or vanilla JS demo on CodePen

lazyLoad

Triggered after an image has been loaded with lazyLoad.

// jQuery
$carousel.on( 'lazyLoad', function( event, cellElement ) {...})
// vanilla JS
flkty.on( 'lazyLoad', function( event, cellElement ) {...})

event Event Original event object.

cellElement Element The image's cell element.

lazyLoad is triggered on both valid images and broken images. Check event.type to see if the loaded image was loaded with load or error. Use event.target to access the loaded image.

// jQuery
$carousel.on( 'lazyLoad', function( event, cellElement ) {
  var img = event.originalEvent.target;
  console.log( event.originalEvent.type, img.src );
  // load or error on src
});

// vanilla JS
flkty.on( 'lazyLoad', function( event, cellElement ) {
  var img = event.target;
  console.log( event.type, img.src );
});

Edit this demo or vanilla JS demo on CodePen

API

Methods

Selecting cells

select

previous

next

Sizing and positioning

resize

reposition

Adding and removing cells

prepend

append

insert

remove

Player

playPlayer

stopPlayer

pausePlayer

unpausePlayer

Utilities

destroy

reloadCells

getCellElements

jQuery.fn.data('flickity')

Flickity.data()

Properties

selectedIndex

selectedElement

cells

Events

jQuery event binding

Vanilla JS event binding

Events demo

cellSelect

settle

dragStart

dragMove

dragEnd

pointerDown

pointerMove

pointerUp

staticClick

lazyLoad

Isotope

Packery