每张幻灯片上的滑动滑块更改 background-color

Question

设置是这样的。带有客户徽标的滑块，一次显示一个。我想将 parent div 的 background-color 更改为每个客户（和 H1）的特定品牌颜色。尽可能动画化。

我该怎么做？

我的 HTML - 我想更改 div 部分的 background-color 和 content-wrapper 中的 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() 获取幻灯片元素并设置背景颜色。

slick 对象将其幻灯片存储在 $slides 中，因此您可以通过 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);
});

每张幻灯片上的滑动滑块更改 background-color

Slick slider change background-color on each slide

html

css

jquery

slick.js