javascript - Slick.js 自定义点

Question

我正在尝试自定义 slick.js 附带的标准点。我有一个类“透明圆圈”，我想用作点，当点处于事件状态时，我想使用类“事件”

这是我的类(class)的样子:

.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

您必须s 在 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({
   // ....
});