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 :)

purchase nectar slider. – Pratik Joshi Mar 27 '14 at 05:30 — Pratik Joshi, Mar 27 '14 at 05:30
thanks @PratikJoshi can you give me the demo link :) – sunilkjt Mar 27 '14 at 05:32 — sunilkjt, Mar 27 '14 at 05:32

Naveenkumar · Answer 1 · 2014-03-27T05:46:58.090

5

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/

edited Mar 27 '14 at 05:46

answered Mar 27 '14 at 05:33

Naveenkumar

483
5
20

THanks but I need the slider where main images must be three instead of one :) – sunilkjt Mar 27 '14 at 05:35
see the 11th one @ this link.... http://webtoolsdepot.com/30-best-jquery-image-and-content-slider-plugins/..... mark if you found as answer – Naveenkumar Mar 27 '14 at 05:47
I cant find the download link for Likno JQuery Scroller .Whenever I try to download the file it downloads likno software instead :(.Do u have any external link to download the jquery file ?? :) – sunilkjt Mar 27 '14 at 06:00
1

Just download application and create carousel in it and it will give you code as well – Richa Mar 27 '14 at 06:50
I couldnot find the required template in that software :( – sunilkjt Mar 28 '14 at 05:01

score 3 · Answer 2 · edited Sep 26 '14 at 15:30

You can find such slider in this link

For adding the image thumbnails just replace the text by image source like this:

<a href="#"><img src="images/1.jpg" alt="img01" height="50px" width="50px"><img src="images/2.jpg" alt="img02" height="50px" width="50px"><img src="images/3.jpg" alt="img03" height="50px" width="50px"></a>
<a href="#"><img src="images/5.jpg" alt="img05" height="50px" width="50px"><img src="images/6.jpg" alt="img06" height="50px" width="50px"><img src="images/7.jpg" alt="img07" height="50px" width="50px"></a>
<a href="#"><img src="images/9.jpg" alt="img09" height="50px" width="50px"><img src="images/10.jpg" alt="img10" height="50px" width="50px"><img src="images/11.jpg" alt="img11" height="50px" width="50px"></a>
<a href="#"><img src="images/12.jpg" alt="img12" height="50px" width="50px"><img src="images/13.jpg" alt="img13" height="50px" width="50px"><img src="images/14.jpg" alt="img14" height="50px" width="50px"></a>

This will show the thumbnails of same image which you are showing in the slider. Hope you will get this.

score 3 · Accepted Answer · answered Mar 27 '14 at 07:38

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.

THank you for the link but still no luck in flex slider too. I cant still create three main images at once — sunilkjt, Mar 28 '14 at 05:05

score 1 · Answer 4 · answered Mar 27 '14 at 05:34

1

Have a look at following site, you will get all types of carousel.

Carousel Demos

And following with thumbnails

Carousel with thumbnails

answered Mar 27 '14 at 05:34

Richa

3,261
2
27
51

Thank you @rs26 but i need slider that shows 3 images at once instead of one image.Is wow slider customisable so that we can make main image 3 images instead of one ? – sunilkjt Mar 27 '14 at 05:44
Check the following link, you can modify Wow slider in following way http://www.bootply.com/89193 . And following shows three at a time but moves only one at time http://www.bootply.com/94444 – Richa Mar 27 '14 at 05:46
Thanks but I need thumbnails too – sunilkjt Mar 27 '14 at 06:46
Just download Likno Jquery Scroller application and create carousel in it and it will give you code as well – Richa Mar 27 '14 at 06:52
I could not find the desired slider though I installed the software . – sunilkjt Mar 27 '14 at 07:13

jQuery Slider with image thumbnails

4 Answers4