Slick.js customizing dots

Question

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

Answer 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({
   // ....
});

Answer 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. 😬