title: Uncaught TypeError: undefined is not a function slick car
body: <p>I've read through and couldn't find a solution tailored to my problem</p>
  
  <p>I am trying to get the slick carousel to work. I've gotten it to work on jsbin shown here:
  <a href="http://jsbin.com/gojozobemi/1/edit?html,output" rel="nofollow">http://jsbin.com/gojozobemi/1/edit?html,output</a></p>
  
  <p>However when working on my desktop it displays a error in the dev console saying "Uncaught TypeError: undefined is not a function"
  Heres some of my desktop's code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      $('.single-items').slick({
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          adaptiveHeight: true
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="single-items"&gt;
      &lt;div&gt;
          &lt;img src="http://wallpapercartoon.com/wp-content/uploads/2014/07/o-DOUG-facebook.jpg"&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="http://img3.wikia.nocookie.net/__cb20130803215442/nickelodeon/images/e/e2/Tumblr_lvjvhxwDiM1r6hffko1_400.jpg"&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;img src="http://fc02.deviantart.net/fs70/f/2013/303/b/4/pork_chop_by_barontremaynecaple-d6sdm6s.jpg"&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm stumped as to why this would work on JSBin and not on my desktop, any help would be appreciated</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if IE 9]&gt;&lt;html class="lt-ie10" lang="en" &gt; &lt;![endif]--&gt;
  &lt;html class="no-js" lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;!-- If you delete this meta tag World War Z will become a reality --&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;Coffee Site&lt;/title&gt;
  
    &lt;link rel="stylesheet" href="css/normalize.css"&gt;
    &lt;link rel="stylesheet" href="css/foundation.css"&gt;
    &lt;link rel="stylesheet" href="css/app.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" /&gt;
  
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/vendor/modernizr.js"&gt;&lt;/script&gt;
    &lt;script src="js/slickini.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="contain-to-grid sticky"&gt;
      &lt;nav class="top-bar" data-topbar role="navigation"&gt;
        &lt;ul class="title-area"&gt;
          &lt;li class="name"&gt;
            &lt;h1&gt;&lt;a href="#"&gt;Coffee Site&lt;/a&gt;&lt;/h1&gt;
          &lt;/li&gt;
          &lt;!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --&gt;
          &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;Menu&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;section class="top-bar-section"&gt;
          &lt;!-- Right Nav Section --&gt;
          &lt;ul class="right"&gt;
            &lt;li class="has-form"&gt;
              &lt;div class="row collapse"&gt;
                &lt;div class="large-8 small-9 columns"&gt;
                  &lt;input type="text" placeholder="Find Stuff"&gt;
                &lt;/div&gt;
                &lt;div class="large-4 small-3 columns"&gt;
                  &lt;a href="#" class="alert button expand"&gt;Search&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;!-- Left Nav Section --&gt;
          &lt;ul class="left"&gt;
            &lt;li class="has-dropdown"&gt;
              &lt;a href="#"&gt;Left Button Dropdown&lt;/a&gt;
              &lt;ul class="dropdown"&gt;
                &lt;li&gt;&lt;a href="#"&gt;First link in dropdown&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Active link in dropdown&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/section&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
    &lt;!---main content goes here--&gt;
    &lt;div class="single-items"&gt;
      &lt;div&gt;
        &lt;img src="http://wallpapercartoon.com/wp-content/uploads/2014/07/o-DOUG-facebook.jpg"&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;img src="http://img3.wikia.nocookie.net/__cb20130803215442/nickelodeon/images/e/e2/Tumblr_lvjvhxwDiM1r6hffko1_400.jpg"&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;img src="http://fc02.deviantart.net/fs70/f/2013/303/b/4/pork_chop_by_barontremaynecaple-d6sdm6s.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/vendor/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="js/foundation.min.js"&gt;&lt;/script&gt;
  
  
    &lt;script&gt;
      $(document).foundation();
    &lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>