Question

嗨我使用光滑制作了一个滑块。我不能为我的生活弄清楚如何在幻灯片更改时更改标题的背景颜色（位于滑块顶部）。

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

我整个上午都试图想办法做到这一点，我甚至试图复制标题并在每张幻灯片中使用，但这给我带来了更多问题。

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

我的代码如下：

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

你需要在幻灯片更改之前使用，这是一个可以使用的光滑滑块功能，这里有一个小代码片段：

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

从控制台日志中可以看出，它将删除当前幻灯片，然后您可以使用jQuery来定位标题并将类放到其上。

然后使用css定位标题＆amp;改变颜色快速的例子：

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

使用css定位

header {
    background: white;
}

header.slide-1 {
    background: red;
}

希望这有帮助。

滑块控制外部元素

2 个答案: