Glen Mossong Glen Mossong - 1 year ago 104
Javascript Question

Event for when Flickity reaches the next or previous slide

Flickity has event binding. Is there an event for when the next or previous slide is moved to? For example the settle event is fired after a slide settles. This does do what I need but the problem here is it also fires if Flickity settles on the same slide, this would happen if you swiped but didn't swipe enough and Flickity settles back where it was. The cellSelect demo appears to do much the same thing.

In my mind something like this perhaps explains what I'm trying to achieve:

$carousel.on( 'nextSlideReached', function() {
console.log( 'Flickity has settled on the next slide' );

Answer Source

Using the settle event we can check if we've settled at a new slide or not:

var selectedIndex = flkty.selectedIndex;

$carousel.on( 'settle', function() {
  if ( flkty.selectedIndex !== selectedIndex ) {

    console.log('settled at new cell', flkty.selectedIndex);
    selectedIndex = flkty.selectedIndex;

    // do stuff