select event fires multiple times with lazyLoad

[fireform]

Hi David!
Thanks a lot for your huge work on this project!

I'm experiencing some odd behavior. So, I run two carousels (main + navigation). If I use "lazyLoad" option in the main carousel, "select" event triggers as many times as how many images specified to lazy load + first image + 1 additional firing (3 in total). I reproduced this on Codepen: http://codepen.io/wpspd/pen/GNzGdg As I understand, this shouldn't happen every time after lazy loading and, moreover, within the navigation. Now I need to use hacks to do not take into account false triggers. Is there any official workaround? Thanks in advance!

[chrisbraddock]

I just ran in to the same issue. I'm just going to try debouncing it for now.

[danimalweb]

Same issue here.

[desandro]

Thanks for reporting this issue.

For the record, this behavior is how Flickity is supposed to work — currently. When a cell's size changes, Flickity has to re-calculate the position of all the cells. Currently, it triggers select to resolve any position mismatch. I'll admit, it's clunky.

That said, I'm looking into refactoring this behavior. Using select feels like a hack in this case. If you're interested, here's the relevant code

[hirasso]

I am having the same issue with select firing many times when using lazyLoad (In my case I defined lazyLoad: 2 and it's firing 5 times). Since I am manipulating the browser history on cell select, it always lags for a very short (but noticeable) time. Of course I can go with the settle event for now, but I would prefer select as it responds immediately.

[marcus-at-localhost]

I ran into the same problem, using lazyLoad and the settle.flickity event in my case. The event is fired twice and causes weird behaviours in my app.

[desandro]

🎉 Flickity v2.1.0 has been released with all new change event See docs! 🎉

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 ) {...});

select will continue to be triggered multiple times, but change is only triggered when the selected slide is changed. Use change to resolve the issue here.

I'm now closing this issue. Please open a new issue if you into trouble with using change. Thanks for sticking with Flickity! 🌈🐻