title: How to reposition the dots in slick?
body: <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>