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

请试试这个：

$(document).on('ready', function() {
        $(".fade-carousel").slick({
            lazyLoad: 'ondemand', // ondemand progressive anticipated
            infinite: true
        });
        // On before slide change
        $('.fade-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
            var nextSlide = parseInt(nextSlide)+1;
            if($( ".fade-carousel .slide-container:nth-child("+nextSlide+") > div").hasClass('intro-bg')) { 
                $('#header').addClass('transparent-header'); 
            } else { 
                $('#header').removeClass('transparent-header'); 
            } 
        });
    });

Ref Link

Answer 2

我能够在不同的帖子上得到这个答案，但这有效：

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

}）;

导航活动

2 个答案: