How to set initial active slide to different index in swiperjs ReactJS?

Question

I want to set the index of the swiper's active slide to the center position? As you can see in picture the active index is set to 0, I want it be number 3, i.e: middle and it should remain middle

 <Swiper
      grabCursor={true}
      spaceBetween={10}
      modules={[Navigation, Thumbs]}
      slidesPerView={7}
    //  activeSlideKey={3}
      slideActiveClass={styles.activeSlider}
    >
      {options.map((option) => () => <SwiperSlide key={option}>{option}</SwiperSlide>)}
    </Swiper>

activeSlideKey is just for reference. It does not work.

score 6 · Answer 1 · edited Aug 16 '22 at 08:52

6

Very simple.

Use API Parameter initialSlide (0 == first slide, 1 == second slide and so on) - Index number of initial slide. https://swiperjs.com/swiper-api#param-initialSlide

<Swiper
  initialSlide="3"
  navigation={true}
  modules={[Navigation]}
  className="mySwiper"
>

Combine if you want with centeredSlides ={true} & loop={true}.

Centered demo: https://swiperjs.com/demos#centered

edited Aug 16 '22 at 08:52

Penny Liu

15,447
5
79
98

answered Mar 26 '22 at 15:07

Ezra Siton

6,887
2
25
37

i tried this, and its not working: https://codesandbox.io/s/swiper-centered-react-forked-4glxt3?file=/src/App.jsx – Sam Shaw Aug 30 '22 at 11:24
1

For me it is working (Start on slide 4) on your sandbox. – Ezra Siton Aug 30 '22 at 13:11
you're right, now it works for me as well, i dont know what changed. – Sam Shaw Aug 30 '22 at 15:33

score -4 · Answer 2 · answered Mar 25 '22 at 19:03

-4

<Swiper
centeredSlides ={true}
>
...
</Swiper>

answered Mar 25 '22 at 19:03

Farooq Ali

11
1
1
4

1

This is *completely* irrelevant. – Brandon Osborne Sep 11 '22 at 21:00

How to set initial active slide to different index in swiperjs ReactJS?

2 Answers2