如何阻止Swiper.js识别到最后一张slide时自动禁用next下一页按钮

Swiper初始化时会基于当前存在的slide节点总数计算滑动边界、索引状态，你动态添加slide后没有通知Swiper更新内部状态，所以它会沿用初始1个slide的计算结果，误将第一页判定为最后一页，触发下一页按钮的禁用逻辑。

方案1：根本解决状态同步问题（最推荐） #

动态添加完所有.swiper-slide节点后，手动调用Swiper实例的update方法，让它重新计算所有状态：

// 动态添加slide的代码执行完成后调用
swiper.update()

Swiper更新内部的slide总数、边界参数后，会自动修正isEnd的判定结果，不需要你手动修改按钮的类和属性。
如果直接使用Swiper提供的API添加slide，内部会自动触发更新，更省心：

// 示例：往Swiper末尾添加新slide
swiper.appendSlide('<div class="swiper-slide">新的slide内容</div>')

方案2：简化当前的手动修改代码 #

如果确实需要强制覆盖Swiper的禁用逻辑，可以把jQuery操作链式调用简化：

if(swiper.isEnd){
    $("#prosegui")
      .removeClass("swiper-button-disabled swiper-button-lock")
      .removeAttr("disabled tabindex aria-disabled aria-controls")
}

方案3：初始化时禁用Swiper的按钮自动禁用逻辑 #

如果全程不需要Swiper自动控制下一页按钮的禁用状态，可以在Swiper初始化配置中修改navigation相关参数：

const swiper = new Swiper('.swiper', {
  // 其他配置...
  navigation: {
    nextEl: '#prosegui',
    disabledClass: '', // 清空禁用状态的类名，Swiper就不会自动添加
    lockClass: '' // 清空锁定状态的类名
  }
})

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