Question: Controlled swiper

[MildTomato]

Controlling the index of Swiper component

Can the Swiper component be controlled externally, so that an 'active id' could be set?

This is so an external navigation could be used, that could allow the swiper to 'jump' to a specific index.

I would of expected something like this maybe...

const [activeId, setActiveId] = useState(0) 

<Swiper
  activeId={activeId}
  onActiveIndexChange={(slider) => setActiveId(slider.activeIndex)}
...
>

[MildTomato]

Nevermind, answered my own question.

For anyone else interested, here's how to do it.

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

  return (
    <>
      {/* Controls outside of Swiper that use swiper instance */}
      <button onClick={() => swiper.slideTo(0)}>Go to 1st slide</button>
      <button onClick={() => swiper.slideTo(1)}>Go to 2nd slide</button>
      {/* Swiper component */}
      <Swiper onSwiper={setSwiper} slidesPerView={1}>
        <SwiperSlide>first slide</SwiperSlide>
        <SwiperSlide>2nd slide</SwiperSlide>
      </Swiper>
    </>
  );
}

[carlosqdev]

Excellent thanks

[ogheneovo12]

this

Nevermind, answered my own question.

For anyone else interested, here's how to do it.

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

  return (
    <>
      {/* Controls outside of Swiper that use swiper instance */}
      <button onClick={() => swiper.slideTo(0)}>Go to 1st slide</button>
      <button onClick={() => swiper.slideTo(1)}>Go to 2nd slide</button>
      {/* Swiper component */}
      <Swiper onSwiper={setSwiper} slidesPerView={1}>
        <SwiperSlide>first slide</SwiperSlide>
        <SwiperSlide>2nd slide</SwiperSlide>
      </Swiper>
    </>
  );
}

how do i get the most recent active/real index