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

Allsopp

Hi please include what you have tried. – Blah

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

Eject

Thanks for the answer, Im getting TypeError: Cannot read property 'slideTo' of null. Maybe im missing something in my implementation. const [thumbsSwiper, setThumbsSwiper] = useState(null) const slideTo = index => thumbsSwiper.slideTo(index) React.useEffect(() => { setTimeout(() => { slideTo(4) }, 2000) }, []) – Allsopp

When i console.log(swiper) it is returning null. – Allsopp

@CarloCarpio it's because at start the init value of state is null, and then after some time is swiper initialized, but useEffect doesn't react on that change... please see working demo codesandbox.io/s/swiper-test-p67q8?file=/index.js – Eject

@CarloCarpio please accept this answer if it has solved your problem – Charlean

I suggest adding this in slideTo to prevent a couple of common errors, e.g. const slideTo = (index) => { if (!swiper || swiper.destroyed) { return; } swiper.slideTo(index); }; – Boney

Answer 2

just use this

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

  const slideTo = (index) => {
if(swiper) 
swiper.slideTo(index)};

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

Amylum

Answer 3

You can use useSwiper to get the swiper instance inside Swiper on React, and then freely control behaviors of the Swiper including using slideTo method.

Like:

import { Swiper, useSwiper } from 'swiper/react'

const SomethingInsideSwiper = () => {
  const swiper = useSwiper()

  // on click
  const handleOnSetSwiper = () => {
    swiper.slideTo(/* index */)
  }

  // or use side effect
  useEffect(() => {
    swiper.slideTo(/* index */)
  }, /* [state] if you need controlled by a state */)

  return (<>{/* ...... /*}</>)
}

const App = () => {
  return (
    <Swiper {/* SwiperProps */} >
      <SomethingInsideSwiper />
    </Swiper>
  )
}

Heman

what version is this? – Pirali

In 2022, so it may be 8 – Heman

Answer 4

The newer option is to set initialSlide={specificIndex} on <Swiper> instance. If you know which index you want to slide to, just set "initialSlide" prop for Swiper.

Like here:

<Swiper initialSlide={clickedIndex}>

    <SwiperSlide>
        Slide content 1
    </SwiperSlide>
    <SwiperSlide>
        Slide content 2
    </SwiperSlide>
    <SwiperSlide>
        Slide content 3
    </SwiperSlide>

</Swiper>

I test this only in React 17.

Viburnum

this sets an INITIAL slide but then it does not change depending on state/index changes. How can I get this to work? – Roadway

@RobertO'Toole, yes this implementation set the initial slide. The initial slide shouldn't be changed when you are using that slider. Can you explain your use-case, so I understand your problem? – Springing

Answer 5

You can setup a component to do just that (change slide) and stuff it inside (this is important) component.

   const ChangeSlide = ({ position }) => {
      const swiper = useSwiper()

      useEffect(() => {
         if (swiper) {
            swiper.slideTo(position)
         }
      }, [swiper, position])
      return null
   }

then stuff it inside <Swipe> component:

<Swiper ...>
   <ChangeSlide position={2} />
   <Swiperlide> ... </SwiperSlide>
   <Swiperlide> ... </SwiperSlide>
   <Swiperlide> ... </SwiperSlide>
</Swiper>

Ferrochromium