Swiper.js单页初始化多实例带独立控件轮播失效问题

你的代码运行失效是两个问题叠加导致的：

• Swiper自带的navigation配置仅支持绑定固定一组前后控制按钮，你把按钮放在每个slide内部随内容滑动，且通过find拿到的是当前容器下所有按钮的jQuery集合，Swiper无法识别这类多组重复按钮的绑定逻辑
• 多实例初始化时没有做严格的作用域隔离，不同swiper实例的按钮选择逻辑互相污染，导致所有按钮事件绑定失效

放弃使用Swiper默认的navigation配置，改用事件委托手动给每个独立实例绑定按钮控制逻辑，代码如下：

$('.swiper-container').each(function() {
  // 初始化当前独立swiper实例
  const swiper = new Swiper(this, {
    // 其余你需要的swiper配置项（比如loop、speed、分页等）都可以正常加在这里
    on: {
      init: function() {
        // 仅给当前swiper容器内的按钮绑定事件，完全隔离其他实例
        $(this.el).on('click', '.swiper-prev', () => {
          this.slidePrev()
        })
        $(this.el).on('click', '.swiper-next', () => {
          this.slideNext()
        })
      }
    }
  })
})

方案说明 #

• 原有HTML结构、CSS样式完全不需要修改，直接替换JS初始化代码即可
• 事件委托的绑定方式天然适配按钮放在slide内部随内容滑动的场景，不管当前激活的是哪个slide，显示出来的按钮都能正常控制翻页
• 每个swiper实例的事件绑定都限制在自身容器范围内，多个实例之间完全不会串扰，哪怕页面加十几个swiper实例也能正常运行
• 后续如果需要动态新增slide、新增控制按钮，不需要重新绑定事件，新按钮会自动响应点击

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