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 function

中使用jquery来做

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

所以我想删除标准按钮并将css类添加到列表项中，但遗憾的是似乎没有发生任何事情

Answer 1

您必须在Slick初始化后运行 s 功能。

所以这是一个例子，使用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

尝试：

$('#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 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定制点

3 个答案:

在外部脚本文件中