Slick.js定制点

Question

我正在尝试自定义slick.js附带的标准点。我有一个“透明圆”类，我想用它作为点，当这个点是活动的时候，我想用“活动”类。

下面是我的类的样子：

.transparent-circle {
  border: 2px solid #fff;
  height:12px;
  width:12px;
  -webkit-border-radius:75px;
  -moz-border-radius:75px;
}

.active{
  background-color: rgba(126, 222, 186, 1);
  border: 2px solid #7EDEBA !important;
}

以下是我尝试定制的点。我一直在尝试在我的document.ready函数中使用jquery实现这一点

$('.slick-dots li button').remove();
$('.slick-dots li').addClass('transparent-circle');

因此，我想删除标准按钮并将css类添加到列表项中，但不幸的是，似乎什么都没有发生

Answer 1

你必须在Slick初始化之后运行你的函数。

这是一个在init上使用的示例

在设置之前添加以下内容:

$('.your-element').on('init', function(event, slick){
   var $items = slick.$dots.find('li');
   $items.addClass('transparent-circle');
   $items.find('button').remove();
});

// Setup
$('.your-element').slick({
   // ....
});

Answer 2

在外部脚本文件中

$(document).ready(function(){
$(".your-slider").slick({
    dots: true,
    customPaging: function(slider, i) {      
      return '<div class="custom-slick-dots" id=' + i + "></div>";
    }
  });
});

将样式应用于.custom-slick-dots

然后，对于活动状态，将样式应用于.slick-active .custom-slick-dots

您可以根据需要自定义div。

另外，如果这不是一个量身定制的答案，很抱歉……这是一个更通用的答案，适用于任何需要它的人。

Answer 3

尝试：

$('#yourID').slick({
        ...,
        customPaging: function(slider, i) {
            return ''; // Remove button, customize content of "li"
        }
    });

$('#yourID .slick-dots li').addClass('transparent-circle'); //  Add class to "li"