Slider-demo

by freedawirl

HTML

<link rel="stylesheet" href="http://flexslider.woothemes.com/css/demo.css">
<link rel="stylesheet" href="//flexslider.woothemes.com/css/flexslider.css">
<link rel="stylesheet" href="//flexslider.woothemes.com/css/shThemeDefault.css">
<link rel="stylesheet" href="//flexslider.woothemes.com/css/shCore.css">
<script src="//flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<section class="slider">
        <div id="slider" class="flexslider">
          
        <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 2400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
            <li class="flex-active-slide" style="width: 932px; float: left; display: block;">
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false">
  	    		</li>
  	    		<li style="width: 932px; float: left; display: block;">
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" draggable="false">
  	    		</li>
  	    		<li style="width: 932px; float: left; display: block;">
  	    	    <img src="images/kitchen_adventurer_donut.jpg" draggable="false">
  	    		</li>
  	    		<li style="width: 932px; float: left; display: block;">
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" draggable="false">
  	    		</li>
            <li style="width: 932px; float: left; display: block;">
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false">
  	    		</li>
  	    		<li style="width: 932px; float: left; display: block;">
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" draggable="false">
  	    		</li>
  	    		<li style="width: 932px; float: left; display: block;">
  	    	    <img src="images/kitchen_adventurer_donut.jpg" draggable="false">
  	    		</li>
  	    		<li style="width: 932px; float: left; display: block;">
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" draggable="false">
  	    		</li>
            <li...

JavaScript

$(window).load(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });
 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});