React中Swiper.js断点配置：修改spaceBetween响应式值

要在屏幕宽度≤600px时将spaceBetween从100改为30，你需要给Swiper组件添加breakpoints属性，通过负数值断点指定最大宽度条件（即≤600px的场景）。

修改后的完整代码： #

<Swiper
  effect="coverflow"
  grabCursor={true}
  centeredSlides={true}
  slidesPerView={3}
  loop={true}
  pagination={false}
  modules={[EffectCoverflow, Pagination]}
  className="mySwiper d-"
  initialSlide={2}
  spaceBetween={100} // 默认值（屏幕>600px时生效）
  autoplay={true}
  coverflowEffect={{
    rotate: 0,
    stretch: 5,
    depth: 24,
    modifier: 20,
    slideShadows: false,
  }}
  // 添加断点配置
  breakpoints={{
    // 屏幕宽度≤600px时的设置
    '-600': {
      spaceBetween: 30
    }
  }}
>
  <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>

关键说明： #

• Swiper的breakpoints支持负数值键，表示最大宽度断点（如-600对应屏幕宽度≤600px）。
• 默认的spaceBetween={100}会在屏幕宽度超过600px时生效，断点内的设置会覆盖默认值。
• 你也可以在断点中同时调整其他属性（比如slidesPerView），实现更完整的响应式适配。

内容的提问来源于stack exchange，提问作者Muhammad Tehsin