Using Flickity for Isotope filters

[keromaru]

Hi there,

I'm having issues using Flickity to scroll though a few Isotope filter buttons. When dragging on the carousel, jQuery detects a click and Isotope filters straight away. I'd like to scroll/swipe without activating the click. I've used "staticClick" to prevent this from happening and it works fine until I actually click on a filter to trigger it and then any other filter gets triggered upon scrolling/swiping again. I'm not a big expert in jQuery as I just the bare minimum when compiling my own WordPress themes.

Here's my code:

var $carousel = $('.l-carousel').flickity({ cellAlign: 'left', initialIndex: 0, contain: true, prevNextButtons: false, pageDots: false });

$carousel.on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) { // dismiss if cell was not clicked if ( !cellElement ) { return; } // change cell background with .is-clicked $('.c-isotope-filters').on( 'click', 'button', function() {

    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });

    $('.c-isotope-filters button').removeClass('is-active');
    $(this).addClass('is-active');
});

});

My best guess is that the ".on('click')" function is then interfering with the staticClick function once the result is true at least one time. I don't know how else to trigger the Isotope filters though if not this way.

Can anybody help with this? Can't find similar issues online but I don't want to believe I'm the only one trying to use Flickity to avoid Isotope filter buttons to go on numerous lines when on mobile.

Thanks, K

[clarknelson]

on click inside of an on click might not work very well. Maybe move $('.c-isotope-filters') outside of $carousel.on

[keromaru]

on click inside of an on click might not work very well. Maybe move $('.c-isotope-filters') outside of $carousel.on

Hi Clark, thanks for your reply. That was my guess but moving the filtering click out of the carousel staticClick function prevents the latter from doing anything.

[clarknelson]

You may need to wait until the flickity slider is completely loaded before adding the listener to $('.c-isotope-filters'). There is an on ready listener in the docs: https://flickity.metafizzy.co/events.html#ready

[keromaru]

You may need to wait until the flickity slider is completely loaded before adding the listener to $('.c-isotope-filters'). There is an on ready listener in the docs: https://flickity.metafizzy.co/events.html#ready

Thanks Clark. I appreciate the help. Still no luck. Whenever I use the on ready listener, the isotope filters don't filter anything at all anymore. I'm a bit lost. I'm more a PHP kinda guy so I'm a bit lost.

[clarknelson]

potentially $grid is not instantiated? are there any console errors? I still think you are dealing with a race condition