Add class to an element, only when another class is added

Question

I know this question could have similar duplicates but I can't find the solution. I have a slider with 3 slides. The plugin is the lightslider . What I want to achieve is to fire a css animation to an element every time the 3rd slider is the current. I noticed that a class of active is being added to the current slide then, the this slide is the current-visible, like in the screenshot below.

So my initial thought was the following. Grab the specific element ie svg-slide , check if the element has a class of active , and if yes, add the css class that fires the animation.

My code for that:

if ( $('.svg-slide').hasClass('active') ) {
   $('.svg-slide').addClass('fire-animation');
}

The problem with this one is, and correct me if I'm wrong, that when the page loads, the class of active is on the 1st slide, so the code has already checked that svg-slide doesn't have the active class and it does nothing afterwards. Any help would be appreciated.

Answer 1

Why don't you use the getCurrentSlideCount method with onAfterSlide event? And on change of the slide, if the current slide is the third slide you add the class you want:

 var yourSlider = $('#lightSlider').lightSlider({ loop:true, pauseOnHover: true, onAfterSlide: function (el) { var currentSlide = el.getCurrentSlideCount(); if(currentSlide == 3){ //add your class $('.active').addClass('TESTING'); } else { $('.active').removeClass('TESTING'); } } }); 

I've also made you a fiddle .