Как запустить функцию JavaScript, если определенный слайд имеет имя активного класса

Question

Я пытаюсь создать элемент на слайде swiper, поэтому, когда второй слайд на слайдере имеет имя класса «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 не готово.

например,

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

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

          alert('active');
     }

  });

см. здесь , чтобы узнать больше событий

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