[英]Slick.js customizing dots
我正在尝试自定义 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 类添加到列表项中,但不幸的是似乎什么也没发生
你必须运行函数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({
// ....
});
$(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
。
PS 对不起,如果这不是一个量身定制的答案......对于需要它的人来说,它更像是一个通用的答案。 😬
尝试:
$('#yourID').slick({
...,
customPaging: function(slider, i) {
return ''; // Remove button, customize content of "li"
}
});
$('#yourID .slick-dots li').addClass('transparent-circle'); // Add class to "li"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.