如何实现SwiperJS每次滑动时同步修改对应页面HTML元素内容

你可以通过Swiper自带的滑动事件回调实现需求，操作非常简单，只需要修改两处代码即可：

• 第一步：给静态h1标签添加id属性，方便JS快速选中元素修改内容

<h1 id="swiperTitle">Hello World</h1>

• 第二步：修改Swiper初始化配置，添加事件监听逻辑，滑动时自动同步标题内容

var swiper = new Swiper(".mySwiper", {
  pagination: {
    el: ".swiper-pagination",
  },
  // 新增事件配置
  on: {
    // 轮播初始化完成后直接显示第一张对应的标题
    init: function () {
      document.getElementById('swiperTitle').innerText = 'Hello World 1'
    },
    // 每次滑动切换轮播时触发
    slideChange: function () {
      // Swiper默认下标从0开始，加1得到实际的轮播序号
      const currentNum = this.activeIndex + 1
      document.getElementById('swiperTitle').innerText = `Hello World ${currentNum}`
    }
  }
});

补充说明 #

如果你后续开启了Swiper的loop循环滚动配置，只需要把代码里的this.activeIndex替换为this.realIndex，就可以拿到正确的真实轮播序号，不会出现下标错乱的问题。

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