How to reposition the dots in slick?
<p>I'm using slick to create a carousel, currently the dots to indicate what image to show is below the image. I want it to display inside the image, like it is overlaying the image.  </p>

<p>Here is my code</p>

<pre><code>&lt;div class="carousel"&gt;
    &lt;div&gt;&lt;img src="path1"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="path2"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="path3"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here's my css</p>

<pre><code>.slick-dots{
position: absolute;
bottom: -25px;

display: block;

width: 100%;
padding: 0;
margin: 0;

list-style: none;

text-align: center;
}
</code></pre>

<p>Here's my js</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      $('.carousel').slick({
          dots: true,
          infinite: true,
          speed: 500,
          fade: true,
          cssEase: 'ease',
          autoplay: true,
          arrows: false,
          lazyLoad: 'ondemand',
          cssEase: 'linear',
        });
    }); 
&lt;/script&gt;
</code></pre>

<p>Here's the <a href="http://kenwheeler.github.io/slick/" rel="nofollow">link</a> I used for doing the carousel. </p>