如何使用 react js 在 swiper js 中使用断点答案

【问题标题】：how can I use break points in swiper js using react js如何使用 react js 在 swiper js 中使用断点
【发布时间】：2023-02-15 17:51:40
【问题描述】：

嘿，我在反应 js 中使用 swiper.js 库，我有间距值为 100，现在我想要断点 60030 之间的空间，这怎么可能，如何使用断点

type here

<Swiper
      effect={"coverflow"}
      grabCursor={true}
      centeredSlides={true}
      slidesPerView={3}
      loop={true}
      pagination={false}
      modules={[EffectCoverflow, Pagination]}
      className="mySwiper d-"
      initialSlide={2}
      spaceBetween={100}
      autoplay={true}
      coverflowEffect={{
        rotate: 0,
        stretch: 5,
        depth: 24,
        modifier: 20,
        slideShadows: false,
      }}
    >
      <SwiperSlide>
        <div className="d-flex justify-content-center">
          1
          <img src="\assets\images\feature\feature1.png" alt="" />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div className="d-flex justify-content-center">
          2
          <img src="\assets\images\feature\feature2.png" alt="" />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div className="d-flex justify-content-center">
          3
          <img src="\assets\images\feature\feature3.png" alt="" />
        </div>
      </SwiperSlide>
          </Swiper>

【问题讨论】：

标签： reactjs slider swiper.js react-native-swiper react-swiper

【解决方案1】：

您必须在 jsx/tsx 文件中设置断点。

<Swiper
  {...props}
  breakpoints={{
    // when window width is >= 600px
    600: {
      spaceBetween: 20,
    },
  }}
>
  {slides}
</Swiper>

【讨论】：