logo标签列表

带有图像缩略图的jQuery滑块

jqueryhtmlsliderthumbnailsscroller
5
我需要一个类似于附图的带有缩略图滚动条的jquery幻灯片。请问是否有人能够向我发送此类jquery轮播的链接。谢谢 :)
购买花蜜滑块。 - Pratik Joshi
谢谢@PratikJoshi，你能给我演示链接吗 :) - sunilkjt
4个回答
5
谢谢，但我需要一个滑块，其中主要图像必须是三个而不是一个 :) - sunilkjt
请查看此链接中的第11个插件：http://webtoolsdepot.com/30-best-jquery-image-and-content-slider-plugins/。如果您找到了答案，请标记它。 - Naveenkumar
我找不到Likno JQuery Scroller的下载链接。每当我尝试下载文件时，它都会下载Likno软件 :(. 你有没有任何外部链接可以下载jquery文件？ :) - sunilkjt
1
只需下载应用程序并在其中创建走马灯，它将为您提供代码。 - Richa
我在那个软件中找不到所需的模板 :( - sunilkjt
3

您可以在此链接中找到这样的幻灯片。

要添加图像缩略图，请按以下格式替换文本为图像源：

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

这将展示与幻灯片中显示的同一图像的缩略图。希望您能理解。
3
你有多个滑块可以实现这一点。 个人而言，我总是使用flexslider，但nivoslider也是一个不错的选择。

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

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

你的滑块大多是使用CSS实现的。

我认为对于你的情况，你应该使用flexslider。

你需要创建两个滑块，其中一个作为另一个的导航。这是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.

使用下面的代码将一个滑块用作另一个滑块的导航。
$(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 slider 上还是没有成功。我仍然无法一次创建三个主要图像。 - sunilkjt
1
谢谢@rs26，但我需要一个能够同时显示3张图片的滑块，而不是一张图片。Wow Slider是否可定制，以便我们可以将主图像变为3张图片而不是一张？ - sunilkjt
请查看以下链接，您可以按照以下方式修改Wow滑块 http://www.bootply.com/89193。以下显示每次三个，但只移动一个 http://www.bootply.com/94444。 - Richa
谢谢，但我也需要缩略图。 - sunilkjt
只需下载Likno Jquery Scroller应用程序并在其中创建走马灯，它将为您提供代码。 - Richa
我安装了软件，但是找不到所需的滑块。 - sunilkjt
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接