jQuery FlexSlider 和轮播缩略图导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11710188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery FlexSlider and carousel thumbnail navigation
提问by RedsDevils
I am using jQUery FlexSlider the following is my code
我正在使用 jQUery FlexSlider 以下是我的代码
<link rel="stylesheet" type="text/css" href="css/gallery/shCore.css" />
<link rel="stylesheet" type="text/css" href="css/gallery/shThemeDefault.css" />
<link rel="stylesheet" type="text/css" href="css/gallery/flexslider.css" />
<script type="text/javascript" src="js/gallery/modernizr.js"></script>
<script type="text/javascript" src="js/gallery/jquery.flexslider.js" ></script>
<script type="text/javascript" src="js/gallery/shCore.js"></script>
<script type="text/javascript" src="js/gallery/shBrushXml.js"></script>
<script type="text/javascript" src="js/gallery/shBrushJScript.js"></script>
<script type="text/javascript" src="js/gallery/jquery.easing.js"></script>
<script type="text/javascript" src="js/gallery/jquery.mousewheel.js"></script>
And the following isin body
以下是身体
<body>
<div id="slider" class="flexslider">
<ul class="slides">
<li >
<img src="images/gallery/1.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
<li >
<img src="images/gallery/2.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px"/>
</li>
<li >
<img src="images/gallery/3.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
<li >
<img src="images/gallery/4.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
<li >
<img src="images/gallery/5.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
<li >
<img src="images/gallery/6.jpg" alt="image93" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
<li >
<img src="images/gallery/7.jpg" alt="image97" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
<li >
<img src="images/gallery/8.jpg" alt="image108" data-description="Fiesta Gallery" height="299px" width="450px" />
</li>
</ul>
</div>
<div id="carousel" class="flexslider" style="margin-top:-50px;">
<ul class="slides">
<li >
<img src="images/gallery/thumbs/1.jpg" height="100px" />
</li>
<li >
<img src="images/gallery/thumbs/2.jpg" height="100px" />
</li>
<li >
<img src="images/gallery/thumbs/3.jpg" height="100px" />
</li>
<li >
<img src="images/gallery/thumbs/4.jpg" height="100px" />
</li>
<li >
<img src="images/gallery/thumbs/5.jpg" height="100px" />
</li>
<li >
<img src="images/gallery/thumbs/6.jpg" height="100px" />
</li>
<li >
<img src="images/gallery/thumbs/7.jpg" height="100px" />
</li>
<li >
<img src="images/gallery/thumbs/8.jpg" height="100px" />
</li>
</ul>
</div>
</body>
And the following is configuration in the head section
以下是head部分的配置
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
directionNav: false,
slideshow: false,
slideshowSpeed: 7500,
animationSpeed: 400,
itemWidth: 150,
itemMargin: 5,
startAt: 0,
move : 3,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshowSpeed: 7500,
animationSpeed: 400,
pauseOnAction: false,
slideshow: true,
startAt: 0,
sync: "#carousel",
start: function(slider) {
$('#carousel .slides li img').click(function(event){
event.preventDefault();
//slider.flexAnimate(slider.getTarget("next"));
var count = slider.currentSlide + 1;
slider.flexAnimate(count);
});
}
});
});
From above code, I can do auto slide, Left/Right buttons navigation and in some thumnails click it works.
从上面的代码中，我可以执行自动滑动、向左/向右按钮导航，并在某些缩略图中单击它可以工作。
But if i click on two thumbnails behind from current thumbnail, it stop the auto sliding.
但是如果我点击当前缩略图后面的两个缩略图，它会停止自动滑动。
How can i fix this? Any help will apprecite.
我怎样才能解决这个问题？任何帮助都会受到赞赏。
Thanks in adavnce!!
提前谢谢！！
回答by RedsDevils
I replace with the following code: it works
我用以下代码替换：它有效
start: function(slider) {
$('#carousel .slides li img').click(function(event){
$('#slider').flexslider("play");
});
}
I can figure out from the reference: https://github.com/woothemes/FlexSlider/
我可以从参考资料中找出：https: //github.com/woothemes/FlexSlider/
回答by porpor
Here is the HTML structure
这是 HTML 结构
<div class="g-s-wrapper">
<div class="flexslider">
<ul class="slides">
<li data-thumb="assets/img/gallery-photo/1.jpg">
<img src="assets/img/gallery-photo/1.jpg" alt="">
</li>
<li data-thumb="assets/img/gallery-photo/2.jpg">
<img src="assets/img/gallery-photo/2.jpg" alt="">
</li>
</ul> <!-- .slides -->
</div> <!-- .flexslider -->
</div> <!-- .gallery slider wrapper -->
When you call flexslider function, use like below
当你调用 flexslider 函数时，使用如下
if ($('.g-s-wrapper').length > 0) {
$(window).load(function () {
$('.g-s-wrapper .flexslider').flexslider({
slideshowSpeed: 2000,
directionNav: false,
controlNav: true,
start: function(){
var slide_li = $('.g-s-wrapper ul.slides li').not('.clone');
var control_li = $('.g-s-wrapper .flexslider .flex-control-nav li a');
console.log(control_li);
$.each(slide_li, function(index, el){
var img_src = $('<img src="" />').attr('src', $(el).attr('data-thumb'));
img_src.appendTo(control_li[index]);
});
}
});
});
