React项目中Swiper.js断点适配不同屏幕尺寸故障排查

问题根源 #

• 外层直接设置的slidesPerView={4}优先级高于breakpoints内的配置，会强制覆盖所有断点的幻灯片数量设置
• 未添加1200px及以上屏幕的断点配置，不符合需求中的大屏幕显示4张幻灯片要求

修正后的代码 #

<Swiper
  breakpoints={{
    0: { slidesPerView: 1 },
    786: { slidesPerView: 2 },
    1080: { slidesPerView: 3 },
    1200: { slidesPerView: 4 } // 补充大屏幕断点配置
  }}
  spaceBetween={30}
  pagination={{
    clickable: true,
  }}
  modules={[Pagination]}
  className="mySwiper"
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  <SwiperSlide>Slide 5</SwiperSlide>
  <SwiperSlide>Slide 6</SwiperSlide>
  <SwiperSlide>Slide 7</SwiperSlide>
  <SwiperSlide>Slide 8</SwiperSlide>
  <SwiperSlide>Slide 9</SwiperSlide>
</Swiper>

关键说明 #

• Swiper的断点规则是当屏幕宽度≥断点值时，启用对应的配置，无需额外设置最大宽度，系统会自动匹配最接近的断点
• 必须移除外层独立的slidesPerView属性，避免覆盖断点内的配置

内容的提问来源于stack exchange，提问作者Huzaifa Zahid