react-id-swiper icon indicating copy to clipboard operation
react-id-swiper copied to clipboard

Unbound click events on loop cloned elements

Open logusgraphics opened this issue 5 years ago • 2 comments

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.

logusgraphics avatar Jun 30 '20 08:06 logusgraphics

+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,

RichardPK avatar Jul 05 '20 16:07 RichardPK

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.

zeejay09 avatar Nov 22 '21 06:11 zeejay09