슬릭 슬라이더는 각 슬라이드의 배경색을 변경합니다.

Question

설정은 이쪽입니다. 클라이언트 로고가있는 슬라이더가 한 번에 하나씩 표시됩니다. 상위 다이어그램의 배경색을 각 클라이언트 (및 H1)의 특정 brandcolor로 변경하고 싶습니다. 가능한 경우 애니메이션.

어떻게해야할까요?

내 HTML - content-wrapper에서 섹션 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); 
});