title: jQuery slick (carousel) plugin not working
body: <p>I'm trying to use this jQuery plugin ( <a href="http://kenwheeler.github.io/slick/" rel="nofollow">http://kenwheeler.github.io/slick/</a> ) to a carousel. I tried many different plugins, but I always face some kind of error. So, I'm sticking with this until I figure out whats wrong.</p>
  
  <p>Here is my HTML head: </p>
  
  <pre><code>&lt;head&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;
      &lt;meta http-equiv='X-UA-Compatible' content='IE=edge'&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="slick/slick.
          &lt;script type=" text/javascript " src="slick/slick.min.js "&gt;&lt;/script&gt;
          &lt;script type="text/javascript " src='/js/carousel.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>When I tried it, I got an 'Uncaught TypeError: undefined is not a function' at line to of my JS where I call the function 'slick'. Here it where I call it:</p>
  
  <pre><code>&lt;div class="slider single-items"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here is my carousel.js:</p>
  
  <pre><code>$(document).ready(function () {
      $('.single-item').slick({
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          slidesToScroll: 1,
          autoplay: true
      });
  });
  </code></pre>