Slick.js 自定义圆点

Question

我正在尝试自定义 slick.js 附带的标准点。我有一个 class "transparent-circle" 我想用作点，当点处于活动状态时我想使用 class "active"

这是我的 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 class 添加到列表项，但似乎没有任何反应，不幸的是

Answer 1

尝试：

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

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

Answer 2

您必须运行您的函数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({
   // ....
});

Answer 3

在外部脚本文件中

$(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。

P.S。抱歉，如果这不是一个量身定制的答案……对于任何需要它的人来说，它更像是一个通用的答案。

Slick.js 自定义圆点

Slick.js customizing dots

html

javascript

css

jquery

slick.js

在外部脚本文件中