Добавить класс в элемент, только когда добавлен другой класс

Question

Я знаю, что этот вопрос может иметь похожие дубликаты, но я не могу найти решение. У меня есть слайдер с 3 слайдами. Плагин - lightslider. То, что я хочу достичь, - это запустить анимацию css для элемента каждый раз, когда третий слайдер является текущим. Я заметил, что к текущему слайду добавляется класс active, этот слайд является текущим, как на скриншоте ниже.

Так моя первая мысль была следующей. Возьмите конкретный элемент, то есть svg-slide, проверьте, имеет ли элемент класс active, и если да, добавьте класс css, который запускает анимацию.

Мой код для этого:

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

Проблема с этим является, и поправьте меня, если я ошибаюсь, что при загрузке страницы, класс active находится на 1-м слайде, так код уже проверял, что svg-slide не имеет класса active и после этого ничего не делает. Любая помощь будет оценена по достоинству.

Answer 1

Почему бы вам не использовать метод getCurrentSlideCount with onAfterSlide? И на смену слайда, если текущий слайд третий слайд вы добавляете класс вы хотите:

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'); 
 
    } 
 
    } 
 
});

Я также сделал вам fiddle.