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

Events demo

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

Time Event

Flickity events

select

Triggered when a 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() {
  console.log( 'Flickity select ' + flkty.selectedIndex )
})
// vanilla JS
flkty.on( 'select', 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.flickity', function() {
  console.log( 'Flickity settled at ' + flkty.selectedIndex )
})
// vanilla JS
flkty.on( 'settle', function() {...})

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 index.

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.