appostolis appostolis - 4 months ago 6
CSS Question

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

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.

enter image description here

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

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.