Headers 中的徽标随每个猫头鹰旋转木马幻灯片而变化

我的页面中有猫头鹰旋转木马幻灯片，其中包含四张图片，每张幻灯片都覆盖整个屏幕 . 幻灯片中的第一张图片大多是蓝色的，但剩下的图片大多是白色的 .

我有两个徽标图片，位于左上角的 Headers 中 . 一个徽标图像为白色，第二个为黑色 . 我在下面的代码中只包含了白色徽标 .

Headers 和猫头鹰轮播幻灯片的HTML代码 .

<div class="navbar-header">
    <h1 class="logo">
        <a class="" href="/main"><img src="images/white_logo.png"></a>
    </h1>
</div>

<section class="visual">
    <div class="owl-carousel">
        <div class="item visual1">
            <div class="textbox">
                <div class="text">
                    <span>Text for slide 1! Background picture is mostly blue.</span>
                </div>   
             </div>
        </div>
        <div class="item visual2">
            <div class="textbox">
                <div class="text">
                    <span>Text for slide 2! Background picture is mostly white.</span>
                </div>   
            </div>
        </div>
        <div class="item visual3">
            <div class="textbox">
                <div class="text">
                    <span>Text for slide 3! Background picture is mostly white.</span>
                </div>   
            </div>
        </div>
        <div class="item visual4">
            <div class="textbox">
                <div class="text">
                    <span>Text for slide 4! Background picture is mostly white.</span>
                </div>   
            </div>
        </div>
    </div>

然后，另外，Owl Carousel的脚本如下：

$('.visual .owl-carousel').owlCarousel({
    loop: true,
    margin: 0,
    nav: true,
    center: true,
    // autoplay:true,
    // autoplayTimeout:3000,
    // autoplayHoverPause:true,
    responsive: {
       0: {
           items: 1
          }
        },
        onInitialized: function() {
            repositionObj();
        },
        onResized: function() {
            repositionObj();
        }
    });

而且，最后CSS是：

.visual1 {
    background: url(../images/bluepicture.png) no-repeat center;
    background-size: cover; 
}

.visual2 {
    background: url(../images/whitepicture01.png) no-repeat center;
    background-size: cover; 
}

.visual3 {
    background: url(../images/whitepicture02.png) no-repeat center;
    background-size: cover; 
}

.visual4 {
    background: url(../images/whitepicture04.png) no-repeat center;
    background-size: cover; 
}

现在，使用这个当前代码，我有四张图片（一张蓝色图片和三张白色图片），但只有一张徽标图片（white_logo.png）显示幻灯片中的每张图片 . 白色徽标图像最初很合适，因为猫头鹰旋转木马覆盖整个屏幕的第一张图片是蓝色的 .

然而，猫头鹰旋转木马中接下来的三个图像大多是白色的，因此白色徽标图像似乎消失了 . 对于这件事，我创建了另一个版本的这个标识，黑色 . 我们称之为（black_logo.png）

如何在 Headers 中仅显示白色的Owl Carousel幻灯片中的图片，而白色徽标仅用于蓝色图片？

可以这么说：

• white_logo.png＆bluepicture.png

• black_logo.png＆whitepicture01.png

• black_logo.png＆whitepicture02.png

• black_logo.png＆whitepicture03.png