Home > database >  Go to specific page Swiper js
Go to specific page Swiper js

Time:01-07

I need to implement a function that brings the swiper back to the first page. All this hould happen on click of a button. Notice that Iam on React. I tried to find something inside the docs but I could not find anything.

I dont know how to implement this functionality. As I said I was looking for a prop or something like that, but I could not find anything

CodePudding user response:

Swiper's slideTo method may solve your problem.
https://swiperjs.com/swiper-api#method-swiper-slideTo

Here's an example code:

export default function App() {
  const [swiper, setSwiper] = useState(null);
  const goToFirstPage = () => swiper.slideTo(0);
  return (
    <div className="App">
      <Swiper onSwiper={setSwiper}>
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
      </Swiper>
      <button onClick={goToFirstPage}>Go to first page</button>
    </div>
  );
}
  • Related