Setting the active slide in swiper/react with react state

Question

I would like to ask if there is a way to control/set the active slide with swiper/react?

I have tried to handle the onSwiper function with props but still cant update the slide index.

Thank you

Answer 1

You can use swiper instance to access swiper API (https://swiperjs.com/api/) and there is method slideTo.

So in code example it can looks like this

const App = () => {
  // store swiper instance
  const [swiper, setSwiper] = useState(null);

  const slideTo = (index) => swiper.slideTo(index);

  return (
      <Swiper onSwiper={setSwiper} >
        {/* ... */}
      </Swiper>
  )
}