slick.js CSS change on slide change

Question

Is it possible to change css for a div on slick.js slider change? Basically if the slider autoplays or from button click I'd like to cycle through an array of colors and set the background color of .content to that color. Am I being too crazy?

var colors = ['#576986', '#D0D5D6', '#DFDEE5'];

$('.content').css({'background': current i++});

Check out the demo jsfiddle

Any ideas? :)

Matelote

Answer 1

Slick has events, you can find the full list here: https://github.com/kenwheeler/slick

$(".slider").on("beforeChange", function (){
    //change color here
})

To cycle through colors:

var colors = ["red", "orange", "yellow", "green", "blue"];
var currentIndex = 0;

$(".slider").on("beforeChange", function (){
    $(".content").css("background-color", colors[currentIndex++%colors.length]);
});

Exhaust

thank you that's super helpful, any idea how I could cycle forwards or backwards? – Matelote

@Keatinger Thank you! – Matelote

@kathrynm take a look at my edit, does that work for you? – Exhaust