FlexSlider

HTML

<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<section class="slider">
 
<div id="slider" class="flexslider">
          <ul class="slides">
            <li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	   		</li>
  	    		<li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
  	    		</li>
  	    		<li>  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
  	    		</li>
            <li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
  	    		</li>
            <li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
  	    		</li>
          </ul>
        </div>
        <div id="carousel" class="flexslider">
          <ul class="slides">
            <li>
  	    	    <img...

CSS

#slider .flex-next, #slider .flex-prev{
    display:none;
}
#carousel .flex-viewport{
    margin: 0 40px;
}

JavaScript

//http://flexslider.woothemes.com/index.html
$(window).load(function(){
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        direction: "vertical", 

        itemWidth: 150,
        itemMargin: 19,
        asNavFor: '#slider'
      });
      
      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });