appostolis appostolis - 4 years ago 103
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

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
, check if the element has a class of
, and if yes, add the css class that fires the animation.

My code for that:

if ( $('.svg-slide').hasClass('active') ) {

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

Answer Source

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({
  pauseOnHover: true,
  onAfterSlide: function (el) {
    var currentSlide = el.getCurrentSlideCount();
    if(currentSlide == 3){
       //add your class
    } else {

I've also made you a fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download