title: how to solve Slick carousel jquery conflict issue?
body: <p>I tried the <a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick carousel</a> only with foundation and it works. But when I integrate with my MVC framework, just doesn't work. Basically there are more than one javascript plugin I'm using on the front end. SO I believe it's due to jquery conflict.</p>
  
  <p>My script which I placed before <code>&lt;/body&gt;</code> tag</p>
  
  <pre><code>&lt;/script&gt;
      &lt;!--&lt;script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;--&gt;(I have to comment this otherwise the another banner plugin doesnt work)
          &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo $data['config']['THEME_DIR']; ?&gt;/js/slick.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo $data['config']['THEME_DIR']; ?&gt;/js/script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>CSS placed in the header but it doesn't seem to give any effect bbut thats not a problem now.</p>
  
  <pre><code>&lt;link href="&lt;?php echo $data['config']['THEME_DIR']; ?&gt;/css/foundation/slick.css" rel="stylesheet" type="text/css" /&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;section id="features" class="blue"&gt;
              &lt;div class="content"&gt;
  
  
                  &lt;h2&gt;Autoplay&lt;/h2&gt;
                  &lt;div class="slider autoplay"&gt;
                      &lt;div&gt;&lt;h3&gt;1&lt;/h3&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;h3&gt;2&lt;/h3&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;h3&gt;3&lt;/h3&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;h3&gt;4&lt;/h3&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;h3&gt;5&lt;/h3&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;h3&gt;6&lt;/h3&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/section
  </code></pre>
  
  <p>I refered to <a href="https://stackoverflow.com/questions/25985501/slick-carousel-not-working">Slick Carousel Not Working</a>..
  But I dont get it.</p>
  
  <p>Help is badly needed.Thanks all.</p>
  
  <p>EDITED
  I added http:</p>
  
  <pre><code>&lt;script src="**http:**//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
          &lt;script src="**http:**//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="**http:**//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo $data['config']['THEME_DIR']; ?&gt;/js/slick.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo $data['config']['THEME_DIR']; ?&gt;/js/script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Now the Slick works but banner plugin doesnt. It's because I uncomented   </p>
  
  <pre><code>&lt;script src="**http:**//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Can anyone tell me how do I solve this conflict?</p>