title: Slick JS not showing dots
body: <p>I'm using <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">Slick.js</a></p>
  
  <p>For some reason I can't seem to get the dots to show.</p>
  
  <p>This is what I have.</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="slick/slick.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/&gt;
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="slick/slick.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML Markup</strong></p>
  
  <pre><code>&lt;div class="single-item"&gt;
    &lt;div&gt;&lt;img src="img/shadow.jpg" alt=""&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/shadow.jpg" alt=""&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="img/shadow.jpg" alt=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Calling and options</strong></p>
  
  <pre><code>$(document).ready(function(){
      $('.single-item').slick({
             dots: true,
            infinite: true,
            speed: 500,
  
      });
  });
  </code></pre>
  
  <p>Weirdly it groups the images into a slideshow. If I test whether it's working with autoplay the carousel works. The dots are just not showing, even though I call them.</p>
  
  <p><strong>style.css</strong></p>
  
  <p>CSS in a <a href="https://jsfiddle.net/dr8x7oLg/" rel="noreferrer">Fiddle here</a></p>