jQuery的滑块与图像的缩略图

Question

我需要一个jQuery滑块类似像略图滚动到该图像attached.Can有人送我链接到这样的jQuery carausel .Thanks :)

Answer 1

你有多个滑块可以实现这一点。 我个人一直使用flexslider，但nivoslider也是一个很好的选择。

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

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

主要是你的滑块是CSS。

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

U需要创建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 2

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

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

而看到11 Likno JQuery的滚轮在这个环节

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

Answer 3

看看下面的网站，你会得到所有类型的旋转木马。

Carousel Demos

并与缩略图

Carousel with thumbnails

Answer 4

以下你可以找到在这个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> 

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