title: Getting slider to function on Shopify page
body: <hr>
  
  <p>I'm building a shopify site for a friend and can't get the image slider to function properly. My best guess is that I'm loading js and/or jquery files in the wrong order or else there is a conflict I can't figure out.</p>
  
  <p>The site is <a href="http://t25cl.myshopify.com/" rel="nofollow">http://t25cl.myshopify.com/</a> and the slider is the fullscreen pic at the top.</p>
  
  <p>I'm trying to use this responsive slider: <a href="http://responsiveslides.com/" rel="nofollow">http://responsiveslides.com/</a></p>
  
  <p>and here is my code... in the header:</p>
  
  <pre><code>{{ 'responsiveslides.css'         | asset_url | stylesheet_tag }}
  {{ 'responsiveslides.min.js'     | asset_url | script_tag }}
  
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>for the slider:</p>
  
  <pre><code>&lt;div class="twelve columns"&gt;
  &lt;section&gt;
  &lt;ul class="rslides" id="slider1"&gt;
  &lt;li&gt;&lt;img src="{{ 'party-night-waith-dance.jpg' | asset_url }}" alt="{{ shop.name }}"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="{{ 'confetti_party-1320.jpg' | asset_url }}" alt="{{ shop.name }}"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and before the closing /body tag:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
  $(".rslides").responsiveSlides();
  });
  &lt;/script&gt;
  &lt;script&gt;
  // You can also use "$(window).load(function() {"
  $(function () {
  
  // Slideshow 1
  $("#slider1").responsiveSlides({
  auto: true,
  maxwidth: 800,
  speed: 500
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any advice would be much appreciated. I'm pulling my hair out.</p>
  
  <p>Thank you!</p>