外部元素的滑块控制

Question

您好，我使用 slick 制作了一个滑块。当幻灯片更改（位于滑块顶部）时，我一生都无法弄清楚如何更改标题的背景颜色。

当第二张幻灯片可见时，我想将标题背景更改为黑色，将文本颜色更改为白色。

我整个早上都在兜圈子，试图找出一种方法来做到这一点，我什至尝试复制标题并在每张幻灯片中使用，但这给我带来了更多问题。

这有可能吗？如果是这样怎么办？我希望有人能指出我正确的方向！谢谢

我的代码如下：

HTML

<header>hi this is the vavigation</header>

<div class="sliderlastvid">
<div class="videocontainer">
    <div class="video">
        <div class="video-titre">slide1</div>
    </div>
</div>
<div class="videocontainer" style="background: white;">
    <div class="video">
        <div class="video-titre">slide2</div>
    </div>
</div>
<div class="videocontainer" style="background: yellow;">
    <div class="video">
        <img src="" alt=""></img>
        <div class="video-titre">Slide3</div>
    </div>
</div>

CSS

body {background: navy; margin: 0; }
header { width: 100%; height: 30px; color: pink; position: absolute; top: 0; left: 0; border-bottom: 1px solid; z-index: 99; }

.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: #081449;
color: white;
padding: 20px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
img { display: inline-block; }
}

JQUERY

$(document).ready(function () {
$('.sliderlastvid').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1
});
});

请看我的小提琴：jsfiddle

Answer 1

<div class="video-titre" id="secondSlide">slide2</div>

#secondSlide {
  background: black;
  color: white;
}

有效，但不是一个非常漂亮的解决方案。 .slick-slide 类正在以某种方式覆盖所有其他类，无法弄清楚如何让 secondSlide 类覆盖它，除非使用 id。

Answer 2

你需要在换滑前使用，这是一个滑滑的滑块功能，你可以使用，这里有一个小代码sn-p：

$('.sliderlastvid').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
  console.log(currentSlide);
});

正如您从控制台日志中看到的，它会丢弃当前幻灯片，然后您可以使用 jQuery 来定位您的标题并将一个类放到上面。

然后使用 css 定位标题并更改颜色快速排序示例：

$('.sliderlastvid').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
  $('header').addClass('slide-' + currentSlide);
});

以 css 为目标

header {
    background: white;
}

header.slide-1 {
    background: red;
}

希望这会有所帮助。