in loop mode, the component events can't be worked if swipe from the first slide to the last slide about react-id-swiper HOT 7 CLOSED

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?

from react-id-swiper.

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

from react-id-swiper.

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.

from react-id-swiper.

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

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

from react-id-swiper.

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

from react-id-swiper.

onClickFirstSlide

where is onClickFirstSlide & onClickLastSlide?

from react-id-swiper.

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?

from react-id-swiper.