当某张幻灯片具有活动的 class 名称时，如何运行 javascript 函数

Question

我正在尝试在滑动器幻灯片上制作一个功能，因此当滑块上的第二张幻灯片具有 class 名称时 "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

当某张幻灯片具有活动的 class 名称时，如何运行 javascript 函数

How to run a javascript function when a certain slide has an active class name

html

javascript

css

jquery

swiper

当某张幻灯片具有活动的 class 名称时，如何 运行 javascript 函数

How to run a javascript function when a certain slide has an active class name

html

javascript

css

jquery

swiper

当某张幻灯片具有活动的 class 名称时，如何运行 javascript 函数