in loop mode, the component events can't be worked if swipe from the first slide to the last slide

[xinconan]

in loop mode, the component events can't be worked if swipe from the first slide to the last slide.
for example:

<Swiper {...params}>
  {
      imgList.map((list, i) =>
        <img key={i} onClick={this.onDocClick.bind(this, list.url)} src={list.imgUrl} />
      )
   }
 </Swiper>

the onClick method will worked as well in no-loop, but in loop mode, if swipe from the first slide to the last slide, it couldn't worked.
I know the Swiper will clone the first and the last of the element in loop mode, how to make it right in react?

[gareys]

try wrapping your swiper slides with a div. Let's see if that helps.

<div key={i}>
  <img ... />
</div>

[OmgDef]

Faced the same issue. Wrapping into with div doesn't help.

[gareys]

After thinking more about this. I attempted to use loop mode and noticed that it doesn't work very well in my implementation. Soon, I will be working on making loop mode work in a project of mine and will update this with details.

[razor1895]

Because of nature of how the loop mode works, swiper will add duplicated slides, you will see a copy of last slide when you swipe from the first slide to the last. This copy is not under the manage of react, it will not respond to react events. So you need to add a click eventListener to handle this

componentDidMount() {
    const slides = document.querySelectorAll('.swiper-slide');
    const fakeFirstSlide = slides[slides.length - 1];
    const fakeLastSlide = slides[0];

    if (this.props.onClickFirstSlide) {
      fakeFirstSlide.addEventListener('click', this.props.onClickFirstSlide);
    }

    if (this.props.onClickLastSlide) {
      fakeLastSlide.addEventListener('click', this.props.onClickLastSlide);
    }
  }

[crohrer]

This is more a workaround than a real solution to the problem. This gets very messy when you need to track multiple events. Do you plan to implement a real fix, or are react-events in loop-mode not supported?

[zxllzw]

onClickFirstSlide

where is onClickFirstSlide & onClickLastSlide?

[zeejay09]

Because of nature of how the loop mode works, swiper will add duplicated slides, you will see a copy of last slide when you swipe from the first slide to the last. This copy is not under the manage of react, it will not respond to react events. So you need to add a click eventListener to handle this

componentDidMount() {
    const slides = document.querySelectorAll('.swiper-slide');
    const fakeFirstSlide = slides[slides.length - 1];
    const fakeLastSlide = slides[0];

    if (this.props.onClickFirstSlide) {
      fakeFirstSlide.addEventListener('click', this.props.onClickFirstSlide);
    }

    if (this.props.onClickLastSlide) {
      fakeLastSlide.addEventListener('click', this.props.onClickLastSlide);
    }
  }

How to implement this if slidesPerView is set to auto and instead of onClick, the listener used is onMouseEnter and onMouseOut?