Как добавить класс к блоку через JS в момент, когда слайд активен?

Question

[Os Letnik]

Есть блок со слайдером

<div class = "header-slider">
  <div class = "header-slid slick-active">
    <h2></h2>
  </div>
  <div class = "header-slid">
    <h2></h2>
  </div>
  <div class = "header-slid">
    <h2></h2>
  </div>
</div>

Когда слайд активный нужно к h2 добавлять новый класс, когда слайд не активен удалять

Answer 1

[Владимир Проскурин]

А зачем? Если можно в css прям вот так писать

.slick-active h2 {
   /* тут стили, если слайд активный */
}

Comments

[Os Letnik]

Хочу заанимуваты заголовок. при появлении слайда. Однако при загрузке страницы такой метод не работает с первым слайдом (.slick-active h2) и анимация плохо отрабатывает

[Владимир Проскурин]

Os Letnik, тогда вам нужно смотреть код слайдера (может есть API с документацией). И при изменении слайда, добавлять класс к заголовку. Судя по названию класса, у вас slick slider? Тогда вот

$('.header-slider').on('afterChange', function(event, slick, currentSlide){
   $('.header-slider h2').removeClass('header-active');
   $('.header-slider .slick-active h2').addClass('header-active');
});

[Os Letnik]

Огромное спасибо!