title: Slick.js customizing dots
body: <p>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"</p>
  
  <p>This what my classes look like:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Here's what I've tried to customize the dots. I've been trying to do it with jquery in my document.ready function</p>
  
  <pre><code>$('.slick-dots li button').remove();
  $('.slick-dots li').addClass('transparent-circle');
  </code></pre>
  
  <p>So I want to remove the standard buttons and add the css class to the list items but nothing seems to be happening, unfortunately</p>