title: Slick Carousel Uncaught TypeError: $(...).slick is not a function
body: <p>Somehow I'm unable to use slick carousel (<a href="http://kenwheeler.github.io/slick/">http://kenwheeler.github.io/slick/</a>) correctly. </p>
  
  <p>I'm getting the following error:</p>
  
  <pre><code>Uncaught TypeError: $(...).slick is not a function
  </code></pre>
  
  <p>I'm running the following code in my javascript file: </p>
  
  <pre><code>function initSlider(){
      $('.references').slick({
          dots: false,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          autoplay: true,
          prevArrow: '&lt;div class="slick-prev"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/div&gt;',
          nextArrow: '&lt;div class="slick-next"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/div&gt;'
      });
  }
  </code></pre>
  
  <p>I've included the latest jQuery version (2.1.4) with bower. I've also tried including the jQuery CDN in the head of my layout template file, but that didn't resolve anything either.</p>
  
  <p>The only thing strange that could mean something is that when I don't use a function to call the slider, it does work but it gives me the error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'add' of null
  </code></pre>
  
  <p>I found out that that means that the code has been loaded before the DOM was loaded, which is correct (I think).</p>
  
  <p>Thanks in advance!</p>
  
  <p>Edit: I've created a JSFiddle from my code: <a href="https://jsfiddle.net/brz30e77/">https://jsfiddle.net/brz30e77/</a></p>
  
  <p>EDIT2: The error persisted every now and then when adding new function to my JS file. I ultimately stripped my concatenated JS file and found out that there were two versions of jQuery being loaded, of which one was very, very old. </p>