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.
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
<Swiper
centeredSlides ={true}
>
...
</Swiper>