外側の要素のスライダコントロール

Question

こんにちはスライスを使ってスライダを作っています。私は私の人生のために、スライドが変わったとき（スライダーの上に置かれている）、私のヘッダーの背景色を変更する方法を考え出す。

2番目のスライドが表示されたら、ヘッダーの背景を黒に、テキストの色を白に変更したいとします。

私は午前中にこれを行う方法を見つけようとしているので、ヘッダーを複製して各スライド内で使用しようとしましたが、それはもっと多くの問題をもたらしました。

これはすべて可能ですか？そしてもしそうなら、どのように？私は誰かが正しい方向に私を指すことができることを願っています！おかげ

私のコードは次のように：

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

は少しのコードスニペットです：

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

希望を。

Answer 2

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

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

動作しますが、非常にきれいな解決策ではありません。 .slick-slideクラスは他のすべてのクラスを何らかの形で上書きしていますが、secondSlideクラスをid以外で上書きする方法を見つけることはできません。あなたはここで、これはあなたが使用することができます滑らかなスライダー機能で、スライドの変更の前に使用する必要が