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 .

Solution

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/

Comments

[sunilkjt]

Thanks but still I could not find the desired result setting itemWidth will display more than one images :)

[sunilkjt]

Thank you for the jsfiddle demo but it still is not working fully. I need a slider when bottom thumbnail is clicked the three sliders is moved accordingly.For example when 1st image on thumbnail is clicked the 1st three group images must must respentively and so on ...

[Dave Willidow]

So, my example did work, it just wasn't the complete solution... I've modified the HTML so that the example does exactly what you said: each image click (below) reveals the next three slides (above).

[Dave Willidow]

I meant that I updated the jsfiddle link in my original post (not sure if that was clear)..

[Friendly Code]

This was the exact line that I needed itemWidth: ($('.products.flexslider').width() / 3)