带有图像缩略图的jQuery Slider

Question

我需要一个带有缩略图滚动条的jquery滑块，类似于附加的图像。任何人都可以发送链接到这样的jquery轮播。谢谢：）

Answer 1

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

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

在此链接中查看11. Likno JQuery Scroller

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

Answer 2

您可以在此link

中找到此类滑块

要添加图像缩略图，只需按图像源替换文本：

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

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

Answer 3

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

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

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

你的滑块主要是css。

我认为你的情况下你会使用flexslider。

你需要创建2个滑块。 1作为另一个的导航。 以下是flexslider所有选项的链接： https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

对于主滑块，您可以使用下方选项设置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.

使用下面的代码将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"
  });
});

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

Answer 4

看看以下网站，您将获得所有类型的轮播。

Carousel Demos

跟随缩略图

Carousel with thumbnails