JettWell Ingredients Slide

Images to add

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: 600px;">
  <!-- The contents on your slider will be here -->
  <!-- first slide -->
  <div class="ls-slide">
    <!-- slide contents goes here -->

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

    <!-- text layer -->
    <h1 class="ls-l" style="top:100px;left:50px;font-size:50px;color:#ddb7eb;white-space: nowrap;" data-ls="offsetxin:0;durationin:3000;delayin:2000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;rotatexout:90;transformoriginout:50% bottom 0;">
					PRE-FLIGHT PACK
				</h1>


    <h1 class="ls-l" style="top:160px;left:50px;font-size:50px;color:#ffa724;white-space: nowrap;" data-ls="offsetxin:0;durationin:3000;delayin:2000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;rotatexout:90;transformoriginout:50% bottom 0;">
					KAKADU PLUM
				</h1>


    <div class="ls-l" style="top:220px;left:50px; text-align: justify;width:500px;font-size:20px;color:#def2ff;" data-ls="offsetxin:-150;durationin:2000;delayin:500;easingin:easeInOutQuart;rotateyin:-40;offsetxout:-150;durationout:1000;rotateyout:-40;">
      TAKE BEFORE BOARDING, THIS SUPERFOOD WILL HELP STRENGTHEN YOUR IMMUNE SYSTEM. KAKADU PLUM IS THE MOST POTENT NATURAL VITAMIN C SOURCE ON THE PLANET. NATIVE TO THE KAKADU, (ARNHEM LAND) IN THE NORTHERN TERRITORY, AUSTRALIA,THIS ANTIBACTERIAL, ANTIVIRAL,
    ...

CSS

#layerslider h1 {
		  font-family: Lato, 'Open Sans', sans-serif;
		  font-weight: 300;
		}
		
		#layerslider div {
		  font-family: 'Open Sans', Lato, sans-serif;
		  font-weight: 400;
		}

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: true,
     loops: 0
   });
 });
 // ]]>