javascript - How to set initial active slide to different index in swiperjs ReactJS? - Stack Overflow

admin管理员组

文章数量:1344556

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

Share Improve this question Follow asked Mar 25, 2022 at 17:09 Farooq AliFarooq Ali 4911 gold badge11 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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>

本文标签： javascriptHow to set initial active slide to different index in swiperjs ReactJSStack Overflow