title: Can we make a vertical thumbnail slider using flexslider?
body: <p>Hi I'm usually using flexslider. Now i need a thumnail slider. But thumbnail should be vertical, it should have arrows and while clicking on it have to scroll upwards and downwards..Is that possible with flex slider? Can you guys help me?</p>
  
  <p>Here is my code...</p>
  
  <pre><code>  &lt;section class="gallery-details-wrap row-fluid"&gt;
     &lt;div id="slider" class="gallery-details-slider flexslider"&gt;
        &lt;ul class="slides"&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-slider-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-slider-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-slider-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-slider-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-slider-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-slider-1.jpg"&gt;
           &lt;/li&gt;
           &lt;!-- items mirrored twice, total of 12 --&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
     &lt;div id="carousel" class="gallery-details-carousel flexslider"&gt;
        &lt;ul class="slides"&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-thumb-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-thumb-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-thumb-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-thumb-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-thumb-1.jpg"&gt;
           &lt;/li&gt;
           &lt;li&gt;
              &lt;img alt="" src="images/gallery-details-thumb-1.jpg"&gt;
           &lt;/li&gt;
           &lt;!-- items mirrored twice, total of 12 --&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>my script...</p>
  
  <p>$(window).load(function(){
    $('.gallery-details-carousel').flexslider({
      animation: "slide",
      controlNav: false,
      directionlNav: true,
      animationLoop: false,
      slideshow: false,
      itemWidth: 111,
      itemMargin: 5,
      maxItems: 5,
      asNavFor: '.gallery-details-slider', 
    });</p>
  
  <p>$('.gallery-details-slider').flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      sync: ".gallery-details-carousel",
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
  });</p>