带有图像缩略图的 jQuery Slider

jQuery Slider with image thumbnails

提问by sunilkjt

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

我需要一个带有缩略图滚动条的 jquery 滑块，类似于附加的这张图片。谁能给我发送这样的 jquery carausel 链接。谢谢:)

采纳答案by d1m5n

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

您有多个滑块可以实现这一点。我个人总是使用 flexslider，但 nivoslider 也是一个不错的选择。

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

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

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

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

Mostly of your slider is css.

您的滑块大部分是 css。

I think for your case you would use flexslider.

我认为对于您的情况，您会使用 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

你需要创建 2 个滑块。1 充当另一个的导航。这是 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.

对于主滑块，您可以使用下面的选项来设置 3 个项目的可见性。

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.

使用下面的代码将 1 个滑块用作另一个滑块的导航。

$(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.

希望我已经把你推向了正确的方向。

回答by Naveenkumar

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

试试这个..我认为这个链接给了你更多的想法..

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

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

And see the 11. Likno JQuery Scroller in this link

并查看此链接中的 11. Likno JQuery Scroller

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

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

回答by Suman Immortal Maharzan

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.

这将显示您在滑块中显示的相同图像的缩略图。希望你会得到这个。

回答by Richa

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

看看下面的网站，你会得到所有类型的轮播。

Carousel Demos

轮播演示

And following with thumbnails

并跟随缩略图

Carousel with thumbnails

带缩略图的轮播