Manual loop

[code-hero-projects]

I'm using Swiper 7.2.0 with React 17.0.2 and I'm trying to do a manual loop without user interaction. To do this I started by creating a wrapper dor the Swiper component and set the loop prop to true and allowTouchMove prop to false. After that added a useEffect hook to call slideToLoop whenever a slide needed to be changed:

import React, { useEffect, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.min.css';

interface CarouselProps {
  changeIndex: boolean;
}

export const Carousel : React.FunctionComponent<CarouselProps> = props => {
  const { changeIndex, children} = props;
  const [swipper, setSwipper] = useState<any>();

  useEffect(() => {
    if (swipper) {
      swipper.slideToLoop(swipper.activeIndex);
    }
  }, [changeIndex]);

  return (
    <Swiper allowTouchMove={false} loop={true} onSwiper={(swipper) => setSwipper(swipper)}>
      {React.Children.map(children, child => <SwiperSlide>{child}</SwiperSlide>)}
    </Swiper>
  );
}

A parent component would then call this with as many slides as it wants, and update the changeIndex prop want a slide needs to change:

function CarouselWithState () {
  const [changeIndex, setChangeIndex] = useState<boolean>(false);

  useEffect(() => {
    const interval = setInterval(() => setChangeIndex(!changeIndex) , 1500);
    return () => clearInterval(interval);
  }, [changeIndex]);

  return (
    <Carousel changeIndex={changeIndex}>
      <h1>First Page</h1>
      <h1>Second Page</h1>
      <h1>Third Page</h1>
      <h1>Fourth Page</h1>
      <h1>Fifth Page</h1>
    </Carousel>
  );
}

This works fine for the first time it loops. It goes through all the slides back to the first one, as displayed in the attachment.

The problem is that it stops on the first slide after the loop and it doesn't continue. Is there a way around this? Am I missing some property to set in the Swiper component?

Any help would be very appreciated, thank you!

loop-example.mp4