Slick slider change background-color on each slide

Question

The setup is this. A slider with client logos, showen one at a time. I would like to change the background-color of my parent div to the specific brandcolor from each client(and the H1). animateded if possible.

How would i go about doing that?

My HTML - I would like to change the background-color of the section div and the h1 in the content-wrapper.

        <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>

Slick slider - i know i need to do something in the beforeChange, i just dont know what.

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

optimisticupdate · Accepted Answer · 2016-08-12T12:54:15.303

1

You need to get the slide elements and set the background color via jQuery and .css() for example.

The slick object stores it's slides in $slides so you can access them via the index provided through nextSlide.

I've created a working fiddle for you:

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);
});

edited Aug 12 '16 at 12:54

answered Jul 22 '16 at 10:48

optimisticupdate

1,689
14
19

Thanks for the answer. Forgive my ignorance, but im not looking for a random color. I need a very specifik color for each slide. so when the slide .scout is active, the background of .section changes to a specifc color. etc. – Jens Nielsen Jul 22 '16 at 11:56
Hey just added the random color for the example. Where does the color information should come from? A class? If not and you would like to set the color inline via javascript just use $slideContainter.siblings('h1').css({color: '#000000'}); to set it to black e.g. – optimisticupdate Jul 22 '16 at 11:59
Updated the example code. Now you can set your colors two arrays. The index of the color expresses the slide number, starting with 0. – optimisticupdate Jul 22 '16 at 12:08
Color information will be hardcoded in the script. Something like _if active slide = .scout then background-color:#3b1f6a, H1:#ffffff_ and so on for each slide. Something i controll manually. – Jens Nielsen Jul 22 '16 at 12:16
Thank you sooo much, that was exactly what i was looking for. I just edited the example to add animations :). Once again, thank you. You're awesome. – Jens Nielsen Jul 22 '16 at 12:30

Slick slider change background-color on each slide

1 Answers1