title: Slick Carousel arrows do not appear and work as they ought to
body: <p>I am using <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">http://kenwheeler.github.io/slick/</a> but can't seem to get it working as it ought to. Upon running the code below, I can see that the CSS and js files are loaded but not reflected. e.g there are no arrows. </p>
  
  <p>Is there something i might be doing wrong(note: slick CSS and js files, as well as the html file are all located within the same folder</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="../Slick/slick.css" /&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../Slick/slick.min.js"&gt;&lt;/script&gt;    
  
  &lt;h2&gt;title&lt;/h2&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
  
   $(document).ready(function(){
  
          $('.single-item').slick();
  
          });
       });
  &lt;/script&gt;
  
  &lt;div&gt;
      &lt;div class="single-item"&gt;
          &lt;div &gt; &lt;img src="../Slick/F1.jpg" alt="bkj"&gt;&lt;/div&gt;
          &lt;div &gt; &lt;img src="../Slick/F1.jpg" alt="bkj"&gt;&lt;/div&gt;
          &lt;div &gt; &lt;img src="../Slick/F1.jpg" alt="bkj"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>