Unbound click events on loop cloned elements
When setting the loop parameter to true, swiper will clone elements so that the it can be infinitely swiped through. The issue is that when you bind click events on the swiper items or to its children, then these events are not bound to the cloned elements.
I'm not entirely sure if the issue is from the react abstraction itself or it could be inherited from a bug in the swiper library.
+1 to this.
Not only onClick events - onMouseOver / onMouseOut events also aren't acknowledged on cloned elements.
I have onClick & onMouseOver/Out methods on my carousel items - they don't work for the cloned elements. Short video demo here: https://www.youtube.com/watch?v=BJd36ljRAzA
Params:
const params = {
slidesPerView: 3.3,
slidesPerGroup: 1,
loop: true,
spaceBetween: 60
};
Having just searched around, there are quite a few issues already about this:
https://github.com/kidjp85/react-id-swiper/issues/217 & on the original library itself: https://github.com/nolimits4web/swiper/issues/2629
Haven't found a workaround that works though,
Having the same issue as well tried the workarounds suggested but it didn't work in my use case, in my case, each slide have an onMouseOver and onMouseOut for changing the value of a prop, I tried the suggested workaround here https://github.com/kidjp85/react-id-swiper/issues/85 but it did not work.