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

user_8265811 · Answer

In external script file

$(document).ready(function(){
$(".your-slider").slick({
    dots: true,
    customPaging: function(slider, i) {      
      return '

Slick.js customizing dots

3 Answers

In external script file