FlexSlider show 3 main images instead of one

Question

I have flexslider https://github.com/woothemes/FlexSlider I need to have 3 images at once with thumbnails below instead of one main image .

Answer 1

So, here's the HTML structure you'd need...

<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

In the FlexSlider initialization you need to set itemWidth (JS below has two initializations: one for the slide-nav - #carousel, and one for the actual slider - #slider). I've pulled the example from their documentation and added the 'itemWidth' line to the #slider config. Also, the reason I used window.width to set the width instead of hardcoding it is if you need it to be dynamic based on window size you'd want to calculate it using the width of the window... If you don't, you can just set it to a pixel value:

$(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,
    itemWidth:  ($(window).width()/3), // calculate slide width based on window, divide by 3 to show 3
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

The documentation for thumbnail slider is a great place to start: http://flexslider.woothemes.com/thumbnail-slider. This is where I got the HTML structure (above) and the base JS to initialize the thumbnail slider - all I added was the itemWidth property to the config for #slider.

Hope this helps!!

Update: JSFiddle link of working example - http://jsfiddle.net/davewillidow/e9U8N/4/