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

Question

I am trying to make a feature on a swiper slide so when the second slide on the slider has the class name "swiper-slide-active" it alerts the user they are on the second slide

Here is the codepen to my problem 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');
}
});

Possible duplicate of https://stackoverflow.com/questions/20420577/detect-added-element-to-dom-with-mutation-observer — yunzen, Jun 19 '19 at 13:56
Take a look at the docs, specifically mySwiper.realIndex looks like it could be of interest to you. https://idangero.us/swiper/api/#methods — Andy Clarke, Jun 19 '19 at 13:57

Satish Patil · Answer 1 · 2019-06-19T14:14:13.763

3

you need to call your alert code on slide event of swiper not on ready fucntion

e.g

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

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

          alert('active');
     }

  });

see here for more events

edited Jun 19 '19 at 14:14

answered Jun 19 '19 at 14:06

Satish Patil

438
5
15

I typed a comment concerning the usage of 'document on ready' but then I realised that I did not know what the event for that should look like. – Barrosy Jun 19 '19 at 14:13
@yunzen honestly i dont know vanillajs, i will rnd on it – Satish Patil Jun 19 '19 at 14:29
@satsvelke What's `rnd`? – yunzen Jun 21 '19 at 05:48

yunzen · Accepted Answer · 2019-06-21T05:49:19.133

What you want to achieve is probably: If the .second-child is active, then alert

So you need something alongside this

// 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");
  }
})

or

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

No jQuery involved here

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

2 Answers2