Shopify Flexslider Integration with theme settings

shopify-flexslider.liquid

  <!-- add to head of your theme.liquid after moving the files into the assets folder | https://www.woothemes.com/flexslider/ -->
  
  <!-- add only if you theme is not already including Jquery-->
    {{ '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' | script_tag }}
  <!-- FLEX Slider css and .js -->
    {{ 'flexslider.css' | asset_url | stylesheet_tag }}
    {{ 'jquery.flexslider.js' | asset_url | script_tag }}
    
<!-- 
add to schema json
__________________________   -->
    {
    "name": "Homepage Slideshow",
    "settings": [
     {
        "type": "image",
        "id": "slide_1.jpg",
        "label": "Slideshow Image 1",
        "max-width":  1680,
        "max-height": 100
      },
      {
        "type": "image",
        "id": "slide_2.jpg",
        "label": "Slideshow Image 2",
        "max-width":  1680,
        "max-height": 100
      },
      {
        "type": "image",
        "id": "slide_3.jpg",
        "label": "Slideshow Image 3",
        "max-width":  1680,
        "max-height": 100
      }
    ]
  }
  
<!-- 
Create a slider snippet | flexslider-snippet.liquid
__________________________   -->
  <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.home-slider').flexslider({
          animation: "fade",
          animationLoop: true,
          pauseOnHover: false,
          touch: false,
          controlNav: false
    });
  });
</script>

<div class="home-slider flex-container">
  <div class="flexslider">

    <ul class="slides">
      <li>
        {{ 'slide_1.jpg' | asset_url | img_tag: 'slide 1' }}
      </li>
      <li>
        {{ 'slide_2.jpg' | asset_url | img_tag: 'slide 2' }}
      </li>
      <li>
        {{ 'slide_3.jpg' | asset_url | img_tag: 'slide 3' }}
      </li>
    </ul>
  </div>
</div>

<!-- 
include snippet in template 
__________________________   -->

{% include 'flexslider-snippet' %}