If I have multiple divs in a carousel and want one of the divs to change the page's background, would that be possible?
while the carousel is ON the div, not hovering or clicked on
if ($('.carousel').slick('slickGoTo', 1)){ //if slick is on slide index 1
//change to another page where I've already changed the page's background
location.href = page location;
//or change the body's background
let body=document.getElementsByTagName("body");
body.style.background = "image url";
});
Based on the docs, this should work:
$('. carousel').on('afterChange', function(slick, currentSlide){
if (currentSlide===1) {
$('body').addClass('specialBG');
} else {
$('body').removeClass('specialBG');
}
});
and then have the style ready for the special slide
body.specialBG {
background-color:#333;
}