API

Methods

Methods are actions done by Flickity instances.

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

var $gallery = $('.gallery').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('.gallery');
flkty.next();
flkty.select( 3 );

Selecting cells

select

Select a cell.

// jQuery
$gallery.flickity( 'select', index )
// vanilla JS
flkty.select( index )

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

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

Edit this demo or vanilla JS demo on CodePen

previous

Select the previous cell.

// jQuery
$gallery.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() {
  $gallery.flickity('previous');
});
// previous wrapped
$('.button--previous-wrapped').on( 'click', function() {
  $gallery.flickity( 'previous', true );
});

Edit this demo or vanilla JS demo on CodePen

next

Select the next cell.

// jQuery
$gallery.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() {
  $gallery.flickity('next');
});
// next wrapped
$('.button--next-wrapped').on( 'click', function() {
  $gallery.flickity( 'next', true );
});

Edit this demo or vanilla JS demo on CodePen

Sizing and positioning

resize

Resize the gallery and re-position cells.

// jQuery
$gallery.flickity('resize')
// vanilla JS
flkty.resize()

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

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

.gallery.is-expanded .gallery-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() {
  $gallery.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
$gallery.flickity('reposition')
// vanilla JS
flkty.reposition()

$gallery.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
  if ( !cellElement ) {
    return;
  }
  $( cellElement ).toggleClass('is-expanded');
  $gallery.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 gallery.

// jQuery
$gallery.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="gallery-cell">...</div>');
  $gallery.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 gallery.

// jQuery
$gallery.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="gallery-cell">...</div>');
  $gallery.flickity( 'append', $cellElems );
});
1
2
3

Edit this demo or vanilla JS demo on CodePen

insert

Insert elements into the gallery and create cells.

// jQuery
$gallery.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="gallery-cell">...</div>');
  $gallery.flickity( 'insert', $cellElems, 1 );
});
1
2
3

Edit this demo or vanilla JS demo on CodePen

remove

Remove cells from gallery and remove elements from DOM.

// jQuery
$gallery.flickity( 'remove', elements )
// vanilla JS
flkty.remove( elements )

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

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

Click cells to remove

1
2
3
4
5
6
7
8

Edit this demo or vanilla JS demo on CodePen

Utilities

destroy

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

// jQuery
$gallery.flickity('destroy')
// vanilla JS
flkty.destroy()

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

Edit this demo or vanilla JS demo on CodePen

reloadCells

Re-collect all cell elements in flickity-slider.

// jQuery
$gallery.flickity('reloadCells')
// vanilla JS
flkty.reloadCells()

getCellElements

Get the elements of the cells.

// jQuery
var cellElements = $gallery.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 = $('.gallery').data('flickity')
// access Flickity properties
console.log( 'gallery 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-gallery js-flickity">...</div>

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

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 $gallery = $('.gallery').flickity();
// get instance
var flkty = $gallery.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
$gallery.on( 'eventName', listener );
// unbind event listener
$gallery.off( 'eventName', listener );
// bind event listener to trigger once. note ONE not ON
$gallery.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 gallery to see how events are triggered.

Time Event

cellSelect

Triggered when a cell is selected.

// jQuery
$gallery.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
$gallery.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
$gallery.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
$gallery.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
$gallery.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
$gallery.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
$gallery.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
$gallery.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
$gallery.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.

$gallery.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
  // dismiss if cell was not clicked
  if ( !cellElement ) {
    return;
  }
  // change cell background with .is-clicked
  $gallery.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

Metafizzy makes delightful web UI. Also made by Metafizzy:

Isotope

Isotope

Filter & sort magical layouts
Packery

Packery

Gap-less, draggable, bin-packing layout library

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