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.

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.

• javascript
• reactjs
• swiper.js
• react-swiper

2 Answers 2

Very simple.

Use API Parameter initialSlide (0 == first slide, 1 == second slide and so on) - Index number of initial slide. https://swiperjs./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./demos#centered

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