CODEWITHSUNDEEP
javascriptreactjsswiper.jsreact-swiper
Farooq Ali
Farooq Ali

Reputation: 49

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

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.

Upvotes: 4

Views: 24568

Answers (2)

Ezra Siton
Ezra Siton

Reputation: 7741

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

Upvotes: 10

Farooq Ali
Farooq Ali

Reputation: 49

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

Upvotes: -5

Related Questions