Question

我正在尝试根据出现的幻灯片动态更改标题背景。每个幻灯片都从cms中拉出一个帖子，每个帖子都有一个选项来添加背景图像。具有背景图像的那些具有＆＃34; intro-bg＆＃34;那些没有那门课程的人。基本上我希望我的标题在具有背景图像的标题是活动幻灯片时是透明的，然后使用没有该类的幻灯片恢复正常。现在，下面的代码使第一部分发生，但不是第二部分。下一张幻灯片后标题背景不会更改。我希望这一切都有道理，下面是我的代码我不知道这里出了什么问题。任何帮助是极大的赞赏！

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

＆＃39; init＆＃39;事件只会执行一次。除了您当前正在执行的操作之外，每次更改幻灯片时都需要执行相同的逻辑（仅适用于新幻灯片）。例如：

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

在滑块更改时将类添加到标题

1 个答案: