javascript - 幻灯片更改时的 slick.js CSS 更改

Question

是否可以在 slick.js slider 更改时为 div 更改 css？基本上，如果 slider 自动播放或单击按钮，我想循环浏览一组颜色并将 .content 的背景颜色设置为该颜色。我是不是太疯狂了？

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

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

查看演示 jsfiddle

有什么想法吗？ :)

Answer 1

Slick 有事件，您可以在此处找到完整列表:https://github.com/kenwheeler/slick

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

循环显示颜色:

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

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