jQuery Slider with image thumbnails

Question

I need a jquery slider with thumnail scroller similar like to this image attached.Can anybody send me link to such jquery carausel .Thanks :)

Answer 1

Try this one.. I think this link gives you more idea ..

http://www.jssor.com/demos/image-gallery.html

And see the 11. Likno JQuery Scroller in this link

http://webtoolsdepot.com/30-best-jquery-image-and-content-slider-plugins/

Answer 2

You have multiple sliders which can archieve this. Personally i always use flexslider, but nivoslider is also a good alternative.

http://flexslider.woothemes.com/thumbnail-slider.html

http://creative.glenfield.net/nivoexamples3.aspx

Mostly of your slider is css.

I think for your case you would use flexslider.

U need to create 2 sliders. 1 acts as navigation for the other. Here is the link for all the options of flexslider: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

For the main slider you can use the beneath options to set 3 item's visible.

minItems    0   Number Minimum number of carousel items that should be visible.
maxItems    0   Number Maximum number of carousel items that should be visible.
move    0   Number Number of carousel items that should move on animation.

Use the code beneath to use 1 slider as navigation for the other.

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

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

Hope i have pushed you in the right direction.