title: Slick carousel - changing default dots
body: <p>I use this plugin to create a carousel: <a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">https://kenwheeler.github.io/slick/</a>
  By default, there are dots to control the flow of the carousel. However, I'd like to change the dots to squares and also maintain an &quot;active&quot; effect. So I want this:</p>
  <p><a href="https://i.stack.imgur.com/2ZqZP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ZqZP.png" alt="enter image description here" /></a></p>
  <p>to look like this:</p>
  <p><a href="https://i.stack.imgur.com/phtec.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/phtec.png" alt="enter image description here" /></a></p>
  <p>What I've already tried was adding this code when initializing a carousel:</p>
  <pre><code> customPaging : function(slider, i) {
   return &quot;&lt;div class='square'&gt;&lt;/div&gt;&quot;;
  },
  </code></pre>
  <p>and adding this css:</p>
  <pre><code>.square {
    height: 10px;
    width: 10px;
    background-color: #ffe499;
  }
  
  .square:active {
  
    background-color: #ffc425;
  }
  </code></pre>
  <p>But the active effect doesn't work as expected. It works only on click and then disappears.</p>
  <p>I'm also able to change their size like this (it's not related to the code above):</p>
  <pre><code>.slick-dots li button:before {
    font-size: 10px;
    line-height: 10px;
    color: #FFC425 !important;
  }
  </code></pre>
  <p>Maybe there is a way to change the shape using this selector?</p>
  <p>What is the best possible way to solve the problem? I'd appreciate any help.</p>