Есть такая html разметка:
<div id="header"></div>
<div id="carousel">
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
</div>
В блоке carousel - слайдер (например, slick). Он листается автоматически, соответственно у блоков 1, 2 и 3 появляется/исчезает класс "active". При загрузке страницы класс "active" у блока 1 всегда по умолчанию. Мне нужно, чтобы при принятии каждым из слайдов активного класса к блоку header добавлялся определённый класс. Например:
блок 1 имеет класс "active" - header имеет класс "header-blue"
блок 2 имеет класс "active" - header имеет класс "header-red"
блок 3 имеет класс "active" - header имеет класс "header-green"
В js я не силён, смог наваять только такое:
if ($("#1").hasClass("active") ) {
$("#header").toggleClass("header-blue");
}
if ($("#2").hasClass("active") ) {
$("#header").toggleClass("header-red");
}
if ($("#3").hasClass("active") ) {
$("#header").toggleClass("header-green");
}
При загрузке страницы оно работает, далее конечно нет. Прошу помощи у сообщества.
<div id="carousel" class="slider-pro"> <div class="sp-slides"> <div id="1" class="sp-slide">1</div> <div id="2" class="sp-slide">2</div> <div id="3" class="sp-slide">3</div> </div> <div class="sp-thumbnails"> <div class="sp-thumbnail">first</div> <div class="sp-thumbnail">second</div> <div class="sp-thumbnail">third</div> </div> </div>