Question

我正在尝试在滑动幻灯片上创建功能，因此当滑动幻灯片上的第二张幻灯片的类别名称为“ swiper-slide-active”时，它会提醒用户他们在第二张幻灯片上

这是我的问题https://codepen.io/mrsalami/pen/rEWNzN的密码笔

$(document).ready(function() {
  if ($("div.swiper-wrapper > div.swiper-slide.first-child").hasClass("landscape")) {
    $(".swiper-wrapper").addClass('landscape-slider');
  }
  if( $('div.swiper-wrapper > div.swiper-slide.second-child').hasClass('swiper-slide-active')) {
    alert('active');
}
});

Answer 1

您需要在滑动器未发生滑动事件时调用警报代码

例如

swiper.on('slideChange', function () {

  if( $('div.swiper-wrapper > div.swiper-slide.second-child').hasClass('swiper-slide- 
  active')) {

          alert('active');
     }

  });

有关更多事件，请参见here

Answer 2

您想要实现的目标可能是： 如果.second-child有效，则发出警报

所以您还需要一些东西

// Event will be triggered after animation to other slide (next or previous).
// @see https://idangero.us/swiper/api/#events
swiper.on('slideChangeTransitionEnd', function() {  
  // check, if active slide has a class of 'second-child'
  if (this.slides[this.realIndex].classList.contains("second-child")) {
    alert("active");
  }
})

或

swiper.on('slideChangeTransitionEnd', function() {  
  if (this.realIndex == 1) { // second slide, because of zero indexed counting
    alert("active");
  }
})

此处不涉及jQuery

当某个幻灯片具有有效的类名时如何运行javascript函数

2 个答案: