Swiper.js响应式配置问题：大屏3个幻灯片，移动端1.5个显示异常

我希望大屏设备上显示3个幻灯片，移动端显示1.5个幻灯片，但将slidesPerView设置为3后，移动端显示效果极差。

配置代码如下：

<Swiper
  className={styles.swiper}
  slidesPerView={3}
  spaceBetween={0}
  modules={[Navigation, Pagination]}
  navigation
  pagination={{ clickable: true }}
>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
</Swiper>

大屏显示效果：

移动端显示效果：

直接固定slidesPerView无法适配不同屏幕，用Swiper自带的breakpoints配置就能实现响应式适配，针对不同尺寸的屏幕设置对应的参数：

修改后的配置代码：

<Swiper
  className={styles.swiper}
  // 移动端基础配置
  slidesPerView={1.5}
  spaceBetween={10}
  modules={[Navigation, Pagination]}
  navigation
  pagination={{ clickable: true }}
  // 响应式断点配置
  breakpoints={{
    // 屏幕宽度≥768px时启用大屏配置
    768: {
      slidesPerView: 3,
      spaceBetween: 0
    }
  }}
>
  {/* 幻灯片内容保持不变 */}
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
  <SwiperSlide>
    <Product />
  </SwiperSlide>
</Swiper>

说明 #

• breakpoints中的数值是屏幕最小触发宽度，比如768代表屏幕宽度≥768px时切换到大屏配置
• 移动端默认使用slidesPerView={1.5}，同时设置spaceBetween避免幻灯片过度拥挤
• 大屏时自动切换为slidesPerView={3}，保留你想要的显示效果

这样设置后，Swiper会根据屏幕尺寸自动调整显示参数，解决移动端显示拥挤的问题。

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