LayerSlide Test

1st draft

by timsalabim

HTML

<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/1090/4910/files/layerslider.css">
<script src="https://cdn.shopify.com/s/files/1/1090/4910/files/jquery.js"></script>
<script src="https://cdn.shopify.com/s/files/1/1090/4910/files/greensock.js"></script>
<script src="https://cdn.shopify.com/s/files/1/1090/4910/files/layerslider.transitions.js"></script>
<script src="https://cdn.shopify.com/s/files/1/1090/4910/files/layerslider.kreaturamedia.jquery.js"></script>
<div id="layerslider" style="width: 990px; height: 557px;">
  <!-- The contents on your slider will be here -->
  <!-- first slide -->
  <div class="ls-slide" data-ls="slidedelay:4000;transition2d:104;">
    <!-- slide contents goes here -->

    <!-- slide background -->
    <img src="https://cdn.shopify.com/s/files/1/1090/4910/files/jetwell_org_srgb.gif" class="ls-bg" alt="JettWell">

    <!-- image layer -->
    <img src="https://cdn.shopify.com/s/files/1/1090/4910/files/globe_org_srgb.gif" height="130px" class="ls-l" style="top: 24px; left: 3px;" alt="Image layer">

  </div>
  <!-- second slide -->
  <div class="ls-slide" data-ls="slidedelay:4000;transition2d:104;">
    <!-- slide contents goes here -->

    <!-- slide background -->
    <img src="https://cdn.shopify.com/s/files/1/1090/4910/files/info.png" class="ls-bg" alt="JettWell">


  </div>
</div>

JavaScript

// <![CDATA[
 // Running the code when the document is ready
 $(document).ready(function() {

   // Calling LayerSlider on the target element
   $('#layerslider').layerSlider({
     responsiveUnder: 960,
     layersContainer: 960,
     pauseOnHover: false,
     loops: 1
   });
 });
 // ]]>