Swiper移动端无法滑动问题求助

可能的原因及修复步骤 #

1. 缺少触摸滑动核心模块 #

你的配置仅引入了Navigation模块，但Swiper 7+版本中，触摸滑动功能需要依赖Touch模块支撑。修改modules配置，添加该模块：

modules: [Navigation, Touch], 

2. 显式启用触摸交互配置 #

虽然默认开启触摸功能，但可以显式配置确保生效，避免隐式禁用的情况：

touch: true,
touchRatio: 1,
touchAngle: 45,

• touch: true：强制启用触摸滑动
• touchRatio：控制触摸灵敏度，1为正常水平
• touchAngle：设置触发滑动的角度阈值

3. 排查父元素CSS干扰 #

如果Swiper的父容器或祖先元素设置了以下属性，会阻断触摸事件传递：

• pointer-events: none
• touch-action: none
• 错误层级的overflow: hidden

可以给Swiper容器添加CSS确保触摸事件正常触发：

.swiper-container {
  touch-action: pan-x;
}

4. 确认幻灯片数量与配置匹配 #

移动端配置slidesPerView: 2，如果总幻灯片数量小于等于2，滑动操作自然不会生效，检查实际幻灯片数量是否满足滑动条件。

5. 确保初始化时机正确 #

必须在DOM完全加载后初始化Swiper，避免因元素未渲染导致的功能异常：

document.addEventListener('DOMContentLoaded', function() {
  new Swiper('.your-swiper-container-selector', {
    // 你的完整配置
  });
});

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