jquery Flexslider 手动控件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9681333/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-27 11:08:34 来源:igfitidea点击:
jquery Flexslider manual controls is not working
提问by James Cazzetta
I am trying to implement manual controls for the "flexslider" plugin.
我正在尝试为“flexslider”插件实现手动控制。
Here's my code:
这是我的代码：
<body>
<div class="container">
<div class="columns row">
<div class="flexslider"><ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="1.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="2.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="3.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; display: list-item;"><img src="4.jpg"></li>
</ul><ol class="flex-control-nav"><li><a class="">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="active">4</a></li></ol><ul class="flex-direction-nav"><li><a href="#" class="prev">Previous</a></li><li><a href="#" class="next">Next</a></li></ul></div>
</div>
<div class="columns row"><h2><strong>Bla bla bla</strong> Lorum lorum</h2></div>
<div class="columns row">
<div id="thumbnail">
<img width="100" border="0" style="margin: 0 16px 0 0" src="1.jpg">
<img width="100" border="0" style="margin: 0 16px 0 0" src="2.jpg">
<img width="100" border="0" style="margin: 0 16px 0 0" src="3.jpg">
<img width="100" border="0" style="margin: 0 16px 0 0" src="4.jpg">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="../../javascripts/jquery.flexslider-min.js"></script>
<!-- Hook up the FlexSlider -->
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
controlNav: true,
manualControls: "#thumbnail img"
});
});
</script>
I want to have thumbnail pictures as slider control. What am I doing wrong?
我想将缩略图作为滑块控件。我究竟做错了什么？
回答by Bart Groenhuizen
You have to add the option 'controlsContainer'.
您必须添加选项“controlsContainer”。
So your jQuery code should be:
所以你的 jQuery 代码应该是：
$('.flexslider').flexslider({
controlsContainer: ".container",
controlNav: true,
manualControls: "#thumbnail img"
});
