我怎样才能调整slick.js的点行为？

Question

场合

在我的用户界面的右侧，我有3个div，它们可以滑动。 我使用 slick.js 来实现这一目标。 我很喜欢。我想解决这个问题并且仍然需要维护才能继续使用它。

光滑设置（JS）

$('.slide').slick({

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

});

点

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

立即

我想替换点UI，然后将选中/当前 div替换为橙色边框。

目标

这就是我要存档的内容： 我希望我的橙色线表现为一个点，并且最初高亮显示第一个div，依此类推......

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

以下是我创建用户界面的方法：Fiddle

Answer 1

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

看起来像这样，

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

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

要修改活动点，您需要使用

选择它

li.slick-active {}

要修改点容器，请使用

选择它

ul.slick-dots {}

要修改幻灯片，请选择，

div.slick-active {}

例如，在你的css文件中创建以下选择器以获得幻灯片周围的橙色边框（请注意，这是有效的，因为幻灯片具有10px边距，从背景颜色给出边框的效果），

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

最重要的选择器是div.slick-active~div.slick-active。这是一种解决方法，用于代替没有选择器，如：一流的。要阅读更多内容，请参阅此SO回答CSS3 selector :first-of-type with class name?