Javascript 在滑块更改时将类添加到标题
我正在尝试根据出现的幻灯片动态更改标题背景。每张幻灯片都是从cms中引入一篇文章，每一篇文章都可以选择是否添加背景图像。有背景图像的有一个div类“intro bg”，而没有这个类。基本上，当带有背景图像的幻灯片是活动的幻灯片时，我希望标题是透明的，然后当没有该类的幻灯片是活动的时，返回到正常状态。现在，下面的代码实现了第一部分，但不是第二部分。标题背景在下一张幻灯片后不会改变。我希望这一切都是有意义的，下面是我的代码，我不确定这里出了什么问题。非常感谢您的帮助Javascript 在滑块更改时将类添加到标题,javascript,jquery,slick.js,Javascript,Jquery,Slick.js,我正在尝试根据出现的幻灯片动态更改标题背景。每张幻灯片都是从cms中引入一篇文章，每一篇文章都可以选择是否添加背景图像。有背景图像的有一个div类“intro bg”，而没有这个类。基本上，当带有背景图像的幻灯片是活动的幻灯片时，我希望标题是透明的，然后当没有该类的幻灯片是活动的时，返回到正常状态。现在，下面的代码实现了第一部分，但不是第二部分。标题背景在下一张幻灯片后不会改变。我希望这一切都是有意义的，下面是我的代码，我不确定这里出了什么问题。非常感谢您的帮助 $('.fade-carous
$('.fade-carousel').on('init', function(event, slick, currentSlide, nextSlide) {
if ($('.slick-active .slide-container div').hasClass('intro-bg')) {
$('#header').addClass('transparent-header')
} else {
$('#header').removeClass('transparent-header');
}
});
“init”事件将只执行一次。除了当前正在执行的操作外，每次更改幻灯片时，您还需要执行相同的逻辑（仅适用于新幻灯片）。例如：
$('.fade-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
if ($('.slide-container:eq('+nextSlide+') > div').hasClass('intro-bg')) {
$('#header').addClass('transparent-header')
} else {
$('#header').removeClass('transparent-header');
}
});
“init”事件将只执行一次。除了当前正在执行的操作外，每次更改幻灯片时，您还需要执行相同的逻辑（仅适用于新幻灯片）。例如：
$('.fade-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
if ($('.slide-container:eq('+nextSlide+') > div').hasClass('intro-bg')) {
$('#header').addClass('transparent-header')
} else {
$('#header').removeClass('transparent-header');
}
});
哦，天哪，在我发布之前，我尝试过类似的东西，但我有点走火了。谢谢你的澄清。我真的很感激！好的，最后一个问题，如果可以的话！它确实适用于幻灯片转换，但是如果其中一个内容创建者放置的幻灯片中没有“intro bg”类该怎么办。我注意到它加载时将透明头类添加到头中。我怎样才能解决这个问题？@AaronS如果您同时包括
initbeforeChangebeforeChange$（'.fade carousel'）.trigger（'beforeChange'，[this，0，0]）文档中。就绪initbeforeChangebeforeChange$（'.fade carousel'）。触发器（'beforeChange'，[this，0，0]）document.ready