在滑块更改时将 class 添加到 header

Question

我正在尝试根据出现的幻灯片动态更改 header 背景。每张幻灯片都从 cms 中拉入 post，每个 post 都可以选择是否添加背景图像。有背景图片的有 div class 个 "intro-bg" 没有那个 class。本质上，我希望我的 header 在具有背景图像的幻灯片是活动幻灯片时是透明的，然后在没有 class 的幻灯片处于活动状态时恢复正常。现在下面的代码使第一部分发生，但不是第二部分。 header 背景在下一张幻灯片后不会改变。我希望这一切都有意义，下面是我的代码我不确定这里出了什么问题。任何帮助是极大的赞赏！

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

Answer 1

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

在滑块更改时将 class 添加到 header

Add class to header on slider change

javascript

jquery

slick.js