Slick.js customizing dots
Solution 1
You have to run your functions after Slick initialized.
So this is an example , using on 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({
// ....
});
Solution 2
In external script file
$(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
Then for the active state, apply your styles to .slick-active .custom-slick-dots
You can customise the div
as you wish.
P.S. Sorry if this is not a tailored answer...it's more of a general one for anyone who needs it. 😬
Related videos on Youtube
Frank Lucas
Updated on October 14, 2022Comments
-
Frank Lucas over 1 year
I am trying to customize the standard dots that come with 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
$('.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
-
Frank Lucas about 8 yearsThis is genius! Thanks a lot friend! I now need to find a way to inject the active class instead of the standard slick-active class
-
Frank Lucas about 8 years@I2aelba what would you recommend to switch the slick-active class with active?