如何调整 slick.js 的点行为？

Question

情况

在我的 UI 右侧，我有 3 个 div，它们可以滑动。我使用 slick.js 来实现这一点。我很喜欢。我想解决这个问题，还在维护中继续使用它。

光滑设置 (JS)

$('.slide').slick({

    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    infinite: false,
    swipe: true,
    focusOnSelect:true,
    dots:true,

});

点

这些点代表我 div 的状态。首先，第一个点将以黑色突出显示。如果我点击右箭头一次，点的位置也会向右移动一个位置，依此类推...

现在

我要替换圆点UI，给一个selected/currentdiv一个orange 边框代替。

目标

这是我要归档的内容：我希望我的橙色线表现为一个点，并首先突出显示第一个 div，依此类推......

完成这样的事情最优雅的方法是什么？我希望至少有人能给我指出正确的方向。

这是我创建 UI 的方法：Fiddle

Answer 1

使用F12查看slick.js的配置，我看到有一个名为.slick-active的class，用于表示哪个slide/dot处于活动状态。幻灯片本身在 div 中，点在 li.

中

看起来像这样，

<div class='slick-slide slick-active' ...>

<ul class='slick-dots'>
    <li class='slick-active'>
</ul>

要修改活动点，您需要 select 它

li.slick-active {}

要修改点容器，您 select 它与，

ul.slick-dots {}

要修改幻灯片，您 select 使用

div.slick-active {}

例如，在您的 css 文件中创建以下内容 select 或在幻灯片周围添加橙色边框（请注意，这是可行的，因为幻灯片有 10 像素的边距，效果如下来自背景色的边框),

div.slick-active {
    background-color:orange;
}

要隐藏点，请将其添加到您的 css 文件中（注意这将隐藏父 ul 中的所有 li 点），

ul.slick-dots {
    display:none;
}

这是修复的 jsfiddle：http://jsfiddle.net/va5qkycp/8/

和添加的CSS，

div.slick-active { border:3px solid orange; }
div.slick-active ~ div.slick-active { border: 0; }
div.slick-slide { padding:0; margin:5px; }
div.slick-slide .tl-box { width:auto; }

最重要的select或者是div.slick-active~div.slick-active。这是一种解决方法，用于代替没有 select 或类似 :first-of-class 的地方。要了解更多信息，请参阅此 SO 答案 CSS3 selector :first-of-type with class name?

如何调整 slick.js 的点行为？

How can I tweak the dots behavior of slick.js ?

javascript

jquery

css

carousel

slick.js