如何在 swiperjs ReactJS 中将初始活动幻灯片设置为不同索引？

Question

我想将滑动器的活动幻灯片的索引设置到中心位置？ 正如你在图片中看到的，活动索引设置为 0，我希望它是数字 3，即：中间，它应该保持中间

 <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仅供参考。这是行不通的。

Answer 1

很简单。

使用 API 参数initialSlide（0 == 第一张幻灯片，1 == 第二张幻灯片，依此类推）-初始幻灯片的索引号。 https://swiperjs.com/swiper-api#param-initialSlide

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

如果需要，可以与centeredSlides ={true}&组合loop={true}。

居中演示： https: //swiperjs.com/demos#centered