如何在指定Swiper幻灯片激活时执行JavaScript函数

嗨，我来帮你搞定这个Swiper幻灯片的需求！你的代码目前存在一个关键问题：它只在页面加载完成时检查一次第二张幻灯片的状态，但Swiper切换幻灯片的时候，这个判断不会自动重新执行。我们需要利用Swiper自带的事件监听来实现实时检测。

问题分析 #

你的现有代码逻辑是对的，但触发时机不对——页面加载时第二张幻灯片大概率不是激活状态，所以不会弹出提示；而当你切换到第二张时，代码没有重新运行判断。另外还有两个小的选择器错误：

• $("swiper-wrapper") 缺少类选择器的.，应该是 $(".swiper-wrapper")
• 选择器里的 > 是HTML转义字符，在JavaScript里直接用 > 就可以

解决方案代码 #

下面是修正后的完整代码，核心是通过Swiper的事件监听来实时检测幻灯片切换：

$(document).ready(function() {
  // 处理幻灯片方向的逻辑，修正选择器错误
  if ($(".swiper-wrapper > div.swiper-slide.first-child").hasClass("landscape")) {
    $(".swiper-wrapper").addClass('landscape-slider');
  }

  // 初始化Swiper实例，这里可以添加你的自定义配置
  const mySwiper = new Swiper('.swiper-container', {
    // 示例配置，根据你的需求调整
    // loop: false,
    // navigation: {
    //   nextEl: '.swiper-button-next',
    //   prevEl: '.swiper-button-prev',
    // },
  });

  // 监听幻灯片切换结束事件（过渡动画完成后触发）
  mySwiper.on('slideChangeTransitionEnd', function() {
    // 检查第二张幻灯片是否拥有激活类
    if ($('.swiper-wrapper > div.swiper-slide.second-child').hasClass('swiper-slide-active')) {
      alert('当前处于第二张幻灯片！');
    }
  });
});

额外优化方案 #

你也可以通过Swiper实例的activeIndex属性来判断，这种方式不需要依赖second-child类，在幻灯片结构变化时更稳定：

mySwiper.on('slideChangeTransitionEnd', function() {
  // Swiper默认索引从0开始，第二张幻灯片的索引是1（如果没开启loop模式）
  if (this.activeIndex === 1) {
    alert('当前处于第二张幻灯片！');
  }
});

注意事项 #

• 确保你已经正确引入了Swiper的CSS和JS文件
• 如果开启了Swiper的loop模式，activeIndex会有偏移，需要根据实际情况调整判断逻辑

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