Swiper轮播中根据幻灯片激活状态控制元素显示隐藏的实现问题

问题修正说明 #

你的现有代码存在两个核心问题：

• document.querySelectorAll(".slide-down") 返回的是所有匹配元素的NodeList集合，没有classList属性，直接调用会触发语法错误
• 没有针对激活slide做筛选，会导致所有slide的描述元素都被加类，无法实现仅激活项显示描述的需求

修正后代码 #

const swiper = new Swiper(".mySwiper", {
  // 你原来的其他配置参数保留
  on: {
    // 初始化时给首个激活slide加显示类
    init: function () {
      const activeDesc = this.slides[this.activeIndex].querySelector('.slide-down')
      activeDesc && activeDesc.classList.add('appear')
    },
    slideChangeTransitionStart: function () {
      // 先移除当前Swiper内所有描述元素的显示类
      this.el.querySelectorAll('.slide-down').forEach(desc => {
        desc.classList.remove('appear')
      })
      // 仅给当前激活slide内的描述元素加显示类
      const currentDesc = this.slides[this.activeIndex].querySelector('.slide-down')
      currentDesc && currentDesc.classList.add('appear')
    }
  }
});

补充说明 #

上面代码用this.el限定只操作当前Swiper实例内的元素，避免页面存在多个Swiper实例时互相干扰。你原有HTML和CSS代码不需要修改，替换JS部分即可生效。

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