如何使用SwiperJS实现每次仅滑动切换一个轮播项

核心配置调整 #

以下是可直接生效的配置项修改方案：

• 新增slidesPerGroup: 1配置：该参数直接控制单次滑动动作对应的轮播项切换数量，是实现需求的核心配置，即使后续调整slidesPerView同时展示多个轮播项，该参数也能保证单次滑动仅切换1个
• 新增preventInteractionOnTransition: true配置：轮播切换动画执行过程中禁止用户交互，避免快速滑动时一次性触发多次切换
• 可选调整触摸滑动灵敏度，降低误触概率：
  • 配置threshold: 10：用户滑动距离超过10像素才会触发切换，避免轻微触碰就触发跳转
  • 配置longSwipesRatio: 0.3：降低长滑动判定比例，避免长距离滑动时跳过多个轮播项

完整配置示例 #

const swiper = new Swiper('.swiper', {
  // 原有已配置的参数
  slidesPerView: 1,
  // 新增控制单次切换的参数
  slidesPerGroup: 1,
  preventInteractionOnTransition: true,
  threshold: 10,
  longSwipesRatio: 0.3,
  // 其他原有业务配置（分页、导航等保留即可）
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

特殊场景适配 #

如果开启了循环模式（loop: true）出现偶发跳过多项的情况，可以额外新增loopPreventsSliding: true配置，避免循环切换时的计数异常。

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