First or last looped slide state only syncs when slide is interacted with

[nerdyman]

Hi,

First I'd like to say thanks for creating this wrapper for Swiper!

I've run into an issue with looped slides and the internal state of each slide. When moving forward from the last slide to the first slide or moving backwards from the first slide to the last slide the state of the newly active slide is not in sync, however when the newly active slide is dragged the state is resynced and displays correctly.

In the example below I first check the checkbox in the first slide then scroll down, I then loop back to the first slide, but when I arrive back the slide state is the same as it was when the component was first initialised. Only when I drag the slide does the state resync and display the component correctly.

Repro: https://codesandbox.io/s/bold-resonance-635g9?file=/src/App.tsx

Thanks!

[jyotsana-khaparde]

Hi, @nerdyman i too faced this same issue -> When moving forward from the last slide to the first slide or moving backwards from the first slide to the last slide i am not able to click on that slide. it will be helpful If any finding or fixing will be done for it. Thanks

[nerdyman]

Hey @jyotsana-khaparde, we fixed it by adding a useEffect to resync the slides when they finish transitioning.

I've updated the repro to include the fix, hopefully, it works for your use case too!

https://codesandbox.io/s/bold-resonance-635g9?file=/src/Carousel.tsx:712-732

const Carousel: React.FC = (props) => {
  const swiperRef = useRef(null);
  const [params] = useState({
    // Provide Swiper class as props
    Swiper,
    loop: true,
    slidesPerView: 1,
    // Add modules you need
    modules: [Navigation, Pagination],
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
      clickable: true
    },
    spaceBetween: 30
  });

  useEffect(() => {
    swiperRef.current.swiper.on("slideChangeTransitionEnd", () => {
      swiperRef.current.swiper.slideToLoop(
        swiperRef.current.swiper.realIndex,
        0,
        false
      );
    });
  }, []);

  return <ReactIdSwiper ref={swiperRef} {...params} {...props} />;
};

@kidjp85 I think this is an issue in the actual Swiper lib so this issue can be probably be closed? But it might be good to include this workaround in the docs somewhere?

[jyotsana-khaparde]

Hey @nerdyman, Thanks to share this workaround code, it worked for me :-)