移动端Swiper组件跳滑问题求助：已设slidesPerView=1仍跳页

问题描述 #

我有17个幻灯片，大屏设备显示正常，但在移动端会跳过部分幻灯片，无法逐页滑动。已设置slidesPerView=1和slidesPerGroup=1，相关代码如下：

<Swiper
  spaceBetween={50}
  slidesPerView={1}
  slidesPerGroup={1}
  onSlideChange={() => console.log("slide change")}
  onSwiper={(swiper) => console.log(swiper)}
  grabCursor={true}
  navigation={{
    nextEl: ".image-swiper-button-next",
    prevEl: ".image-swiper-button-prev",
    disabledClass: "swiper-button-disabled",
  }}
  modules={[Navigation]}
  breakpoints={{
    // when window width is >= 320px
    320: {
      slidesPerView: 1,
      spaceBetween: 24,
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 2,
      spaceBetween: 24,
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 2,
      spaceBetween: 24,
    },
    1024: {
      slidesPerView: 4,
      spaceBetween: 32,
      slidesPerGroup: 1,
    },
    1336: {
      slidesPerView: 5,
      spaceBetween: 32,
    },
  }}
  tag="section"
  wrapperTag="ul"
  id="main"
  className="mySwiper relative mt-10 space-y-12 w-12/12 mx-auto flex flex-row"
>

问题分析 #

1. 断点配置遗漏：320px移动端断点未显式设置slidesPerGroup:1，Swiper的断点配置会覆盖全局属性，导致移动端的分组滑动规则未生效，引发跳页。
2. 容器布局冲突：Swiper容器的flex flex-row类会干扰Swiper自身的滑动布局逻辑，导致滑动计算异常。

修复方案 #

1. 完善断点配置

在320px断点中添加slidesPerGroup:1，确保移动端强制逐组滑动1个幻灯片；同时建议为其他断点补充对应slidesPerGroup，保持滑动逻辑一致。

2. 移除冲突布局类

删除容器className中的flex flex-row，避免与Swiper内部布局冲突。

3. 可选：关闭循环（若不需要）

添加loop: false可避免循环播放逻辑可能导致的跳页异常。

修改后的代码示例 #

<Swiper
  spaceBetween={50}
  slidesPerView={1}
  slidesPerGroup={1}
  onSlideChange={() => console.log("slide change")}
  onSwiper={(swiper) => console.log(swiper)}
  grabCursor={true}
  navigation={{
    nextEl: ".image-swiper-button-next",
    prevEl: ".image-swiper-button-prev",
    disabledClass: "swiper-button-disabled",
  }}
  modules={[Navigation]}
  loop={false} // 可选：关闭循环防止异常
  breakpoints={{
    320: {
      slidesPerView: 1,
      spaceBetween: 24,
      slidesPerGroup: 1, // 显式设置分组滑动数量
    },
    480: {
      slidesPerView: 2,
      spaceBetween: 24,
      slidesPerGroup: 2, // 匹配当前显示数量，滑动更自然
    },
    640: {
      slidesPerView: 2,
      spaceBetween: 24,
      slidesPerGroup: 2,
    },
    1024: {
      slidesPerView: 4,
      spaceBetween: 32,
      slidesPerGroup: 1,
    },
    1336: {
      slidesPerView: 5,
      spaceBetween: 32,
      slidesPerGroup: 1,
    },
  }}
  tag="section"
  wrapperTag="ul"
  id="main"
  className="mySwiper relative mt-10 space-y-12 w-full mx-auto" // 移除flex flex-row
>
  {/* 幻灯片内容 */}
</Swiper>

额外检查项 #

• 确保所有幻灯片高度一致，高度差异会导致Swiper滑动计算出错；
• 更新Swiper至最新版本，旧版本可能存在移动端滑动的已知bug。

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