带有图像缩略图的 jQuery 滑块答案

【问题标题】：jQuery Slider with image thumbnails带有图像缩略图的 jQuery 滑块
【发布时间】：2014-05-05 22:02:13
【问题描述】：

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

【问题讨论】：

购买花蜜滑块。
谢谢@PratikJoshi 你能给我演示链接吗:)

标签： jquery html slider thumbnails scroller

【解决方案1】：

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

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

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

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

【讨论】：

谢谢，但我需要主图像必须是三个而不是一个的滑块:)
查看第 11 个@此链接....webtoolsdepot.com/…..... 如果您找到答案，请标记
我找不到 Likno JQuery Scroller 的下载链接。每当我尝试下载文件时，它都会下载 likno 软件:(。你有任何外部链接来下载 jquery 文件吗?? :)
只需下载应用程序并在其中创建轮播，它也会为您提供代码
我在该软件中找不到所需的模板:(

【解决方案2】：

您有多个滑块可以对此进行归档。就我个人而言，我总是使用 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"
  });
});

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

【讨论】：

感谢您的链接，但在 flex 滑块中仍然没有运气。我仍然不能同时创建三个主要图像

【解决方案3】：

你可以在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>

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

【讨论】：

【解决方案4】：

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

Carousel Demos

并跟随缩略图

Carousel with thumbnails

【讨论】：

谢谢@rs26，但我需要一次显示 3 张图像而不是一张图像的滑块。哇滑块是否可自定义，以便我们可以制作主图像 3 张图像而不是一张？
查看以下链接，您可以通过以下方式修改 Wow 滑块 bootply.com/89193 。下面一次显示三个，但一次只移动一个 bootply.com/94444
谢谢，但我也需要缩略图
只需下载 Likno Jquery Scroller 应用程序并在其中创建轮播，它也会为您提供代码
虽然我安装了软件，但找不到所需的滑块。