javascript - 在 slider 更改时将类添加到标题

Question

我试图能够根据出现的幻灯片动态更改标题背景。每张幻灯片都从 cms 中拉入帖子，每个帖子都可以选择添加或不添加背景图像。有背景图像的有一个 div 类“intro-bg”，没有该类的则没有该类。本质上，我希望当具有背景图像的幻灯片是事件幻灯片时我的标题是透明的，然后对于没有该类的幻灯片恢复正常。现在，下面的代码使第一部分发生，但不发生第二部分。下一张幻灯片后标题背景不会更改。我希望这一切都有意义，下面是我的代码，我不确定这里出了什么问题。任何帮助是极大的赞赏!

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