Events

Event binding

jQuery event binding

Bind events with jQuery with standard jQuery event methods .on(), .off(), and .one(). Event names are namespaced with .flickity.

// jQuery
function listener(/* parameters */) {
  console.log('eventName happened');
}
// bind event listener
$carousel.on( 'eventName.flickity', listener );
// unbind event listener
$carousel.off( 'eventName.flickity', listener );
// bind event listener to trigger once. note ONE not ON
$carousel.one( 'eventName.flickity', 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');
});

on option

Bind events within Flickity's options by setting on to an Object. The object's keys should match the event names. on is useful for capturing events as Flickity is initialized, like ready

// jQuery
var $carousel = $('.carousel').flickity({
  on: {
    ready: function() {
      console.log('Flickity is ready');
    },
    change: function( index ) {
      console.log( 'Slide changed to' + index );
    }
  }
});

When using on with jQuery, event listener functions will use their vanilla JS form, and not include the jQuery event argument.

// vanilla JS
var flkty = new Flickity( '.carousel', {
  on: {
    ready: function() {
      console.log('Flickity is ready');
    },
    change: function( index ) {
      console.log( 'Slide changed to' + index );
    }
  }
});

Events demo

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

Time Event

Flickity events

ready

Triggered after Flickity has been activated.

With jQuery, bind event listener first, then initialize Flickity.

// jQuery
var $carousel = $('.carousel');
// bind event listener first
$carousel.on( 'ready.flickity', function() {
  console.log('Flickity ready');
});
// initialize Flickity
$carousel.flickity();

Edit this demo on CodePen

With vanilla JS, bind listener with the on option, as the ready event may be triggered immediately.

// vanilla JS
var flkty = new Flickity( '.carousel', {
  on: {
    ready: function() {
      console.log('Flickity ready');
    }
  }
});

Edit this demo on CodePen

change

Triggered when the selected slide is changed.

// jQuery
$carousel.on( 'change.flickity', function( event, index ) {
  console.log( 'Slide changed to ' + index )
});

// vanilla JS
flkty.on( 'change', function( index ) {...});

index Number Zero-based number of the selected slide.

Edit this demo or vanilla JS demo on CodePen

select

Triggered when a slide is selected.

select is triggered any time a slide is selected, even on the same slide. change is triggered only when a different slide is selected.

This event was previously cellSelect in Flickity v1. cellSelect will continue to work in Flickity v2.

// jQuery
$carousel.on( 'select.flickity', function( event, index ) {
  console.log( 'Flickity select ' + index )
});

// vanilla JS
flkty.on( 'select', function( index ) {...});

index Number Zero-based number of the selected slide.

Edit this demo or vanilla JS demo on CodePen

settle

Triggered when the slider is settled at its end position.

// jQuery
$carousel.on( 'settle.flickity', function( event, index ) {
  console.log( 'Flickity settled at ' + index );
});

// vanilla JS
flkty.on( 'settle', function( index ) {...});

index Number Zero-based number of the selected slide.

Edit this demo or vanilla JS demo on CodePen

scroll

Triggered when the slider moves.

// jQuery
$carousel.on( 'scroll.flickity', function( event, progress ) {
  console.log( 'Flickity scrolled ' + progress * 100 + '%' )
});

// vanilla JS
flkty.on( 'scroll', function( progress ) {...});

progress Number How far slider has moved, from 0 at the first slide to 1 at the end 

$carousel.on( 'scroll.flickity', function( event, progress ) {
  progress = Math.max( 0, Math.min( 1, progress ) );
  $progressBar.width( progress * 100 + '%' );
});

Edit this demo or vanilla JS demo on CodePen

Use scroll to create parallax effects.

var flkty = $carousel.data('flickity');
var $imgs = $('.carousel-cell img');

$carousel.on( 'scroll.flickity', function( event, progress ) {
  flkty.slides.forEach( function( slide, i ) {
    var img = $imgs[i];
    var x = ( slide.target + flkty.x ) * -1/3;
    img.style.transform = 'translateX( ' + x  + 'px)';
  });
});
orange tree
freedom tower
drizzle
cat nose
contrail
sunset
planes

Edit this demo or vanilla JS demo on CodePen 

var cellRatio = 0.6; // outerWidth of cell / width of carousel
var bgRatio = 0.8; // width of background layer / width of carousel
var fgRatio = 1.25; // width of foreground layer / width of carousel

$carousel.on( 'scroll.flickity', function( event, progress ) {
  moveParallaxLayer( $background, bgRatio, progress );
  moveParallaxLayer( $foreground, fgRatio, progress );
});
// trigger initial scroll
$carousel.flickity('reposition');

var flkty = $carousel.data('flickity');
var count = flkty.slides.length - 1;

function moveParallaxLayer( $layer, layerRatio, progress ) {
  var ratio = cellRatio * layerRatio;
  $layer.css({
    left: ( 0.5 - ( 0.5 + progress * count ) * ratio ) * 100 + '%'
  });
}

Edit this demo or vanilla JS demo on CodePen

dragStart

Triggered when dragging starts and the slider starts moving.

// jQuery
$carousel.on( 'dragStart.flickity', 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.flickity', 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.flickity', 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.flickity', 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.flickity', 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.flickity', 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.flickity', 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 number.

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

$carousel.on( 'staticClick.flickity', 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.flickity', 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.flickity', 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

bgLazyLoad

Triggered after a background image has been loaded with bgLazyLoad.

// jQuery
$carousel.on( 'bgLazyLoad.flickity', function( event, element ) {...});

// vanilla JS
flkty.on( 'bgLazyLoad', function( event, element ) {...});

event Event Original event object.

element Element The element of the background image.

fullscreenChange

Triggered after entering or exiting fullscreen view.

// jQuery
$carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {...});

// vanilla JS
flkty.on( 'fullscreenChange', function( isFullscreen ) {...});

isFullscreen Boolean true if viewing fullscreen, false if exiting fullscreen