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

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?

[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?

[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);
    }
  }