各スライドの滑らかなスライダの背景色の変更

Question

設定はこれです。 クライアントのロゴを含むスライダ。一度に1つずつ表示されます。 親のdivの背景色を各クライアント（とH1）の特定のブランドカラーに変更したいと思います。可能であればアニメーション化。

どうすればいいですか？

私のHTML - コンテンツラッパーのセクションdivとh1の背景色を変更したいと思います。

 <div class="section clients section-text-right"> 
     <div class="content-wrapper"> 
      <h1>Clients</h1> 
      <div class="frontpage-client-slick slick-theme-frontpage"> 
       <div class="scouts"><img src="images/client-logos/logo_scouts@2x.png"></div> 
       <div class="jjd"><img src="images/client-logos/logo_jjd_white@2x.png"></div> 
       <div class="unipension"><img src="images/client-logos/logo_unipension@2x.png"></div> 
       <div class="dr"><img src="images/client-logos/logo_dr@2x.png"></div> 
       <div class="verdensborn"><img src="images/client-logos/logo_verdensboern@2x.png"></div> 
       <div class="fi"><img src="images/client-logos/logo_fi@2x.png"></div> 
       <div class="midtlink"><img src="images/client-logos/logo_midtlink@2x.png"></div> 
      </div> 
     </div> 
    </div> 

スリックスライダーは - 私はbeforeChangeに何かをする必要がある知っている、私はちょうど何を知りません。

$('.frontpage-client-slick').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: true, 
    infinite: true, 
    speed: 1000, 
    autoplay: true, 
    autoplaySpeed: 4000, 
    fade: true, 
    centerMode: true 
}); 
$('.frontpage-client-slick').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
    console.log(nextSlide); 
}); 

Answer 1

スライド要素を取得し、jQueryと.css（）などを使用して背景色を設定する必要があります。

滑らかなオブジェクトは、スライドが$スライドに保存されるので、nextSlideによって提供されるインデックスからアクセスできます。

私はあなたのために働いてfiddleを作成しました：答えを

var $slideContainter = $('.frontpage-client-slick'), 
    $slider = $slideContainter.slick({ 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     arrows: true, 
     infinite: true, 
     speed: 1000, 
     autoplay: true, 
     autoplaySpeed: 4000, 
     fade: true, 
     centerMode: true 
    }), 
    colorSettings = { 
     headline: ['red', 'blue', 'yellow','red', 'blue', 'yellow','blue'], 
     section: ['blue', 'yellow','red', 'blue', 'yellow','blue', 'red'] 
    }, 
    changeColors = function (slide) { 
     $slideContainter.siblings('h1').animate({ 
     color: colorSettings.headline[slide] 
    }, 1000); 

    $slideContainter.parentsUntil('.section').animate({ 
     backgroundColor: colorSettings.section[slide] 
    }, 1000); 
    }; 

// Initial call to set color 
changeColors(0); 

$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
    changeColors(nextSlide); 
});