[英]Slick.js customizing dots
I am trying to customize the standard dots that come with slick.js.我正在尝试自定义 slick.js 附带的标准点。 I have a class "transparent-circle" that I want to use as dots and when the dot is active I want to use the class "active"
我有一个“透明圆”类,我想用作点,当点处于活动状态时,我想使用“活动”类
This what my classes look like:这就是我的课程的样子:
.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;
}
Here's what I've tried to customize the dots.这是我尝试自定义点的内容。 I've been trying to do it with jquery in my document.ready function
我一直在尝试在我的 document.ready 函数中使用 jquery
$('.slick-dots li button').remove();
$('.slick-dots li').addClass('transparent-circle');
So I want to remove the standard buttons and add the css class to the list items but nothing seems to be happening, unfortunately所以我想删除标准按钮并将 css 类添加到列表项中,但不幸的是似乎什么也没发生
You have to run your function s after Slick initialized .你必须运行函数s后油滑的初始化。
So this is an example , using on init
所以这是一个例子,在
init
使用
Add this before your setup :在您的设置之前添加:
$('.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>";
}
});
});
Apply your styles to .custom-slick-dots
将您的样式应用到
.custom-slick-dots
Then for the active state, apply your styles to .slick-active .custom-slick-dots
然后对于活动状态,将您的样式应用到
.slick-active .custom-slick-dots
You can customise the div
as you wish.您可以根据需要自定义
div
。
PS Sorry if this is not a tailored answer...it's more of a general one for anyone who needs it. PS 对不起,如果这不是一个量身定制的答案......对于需要它的人来说,它更像是一个通用的答案。 😬
😬
try:尝试:
$('#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.