本文介绍了jquery Flexslider手动控件不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图为flexslider插件实现手动控制。以下是我的代码：
<身体GT;
< 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>< /立GT;
< / 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 =＃ < / li>< / li>< / li>< li>< a href =＃class =next> Next< / a>< / 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 =100border =0style =margin：0 16px 0 0src =1.jpg>
< img width =100border =0style =margin：0 16px 0 0src =2.jpg>
< img width =100border =0style =margin：0 16px 0 0src =3.jpg>
< img width =100border =0style =margin：0 16px 0 0src =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>
< script type =text / javascript>
$（window）.load（function（）{
$（'。flexslider'）。flexslider（{
controlNav：true，
manualControls：#thumbnail img
}）;
}）;
< / script>
我想要缩略图作为滑块控件。我做错了什么？
解决方案
您必须添加选项'controlsContainer'。
所以你的jQuery代码应该是：
$ b
$（'。flexslider'）。flexslider（{
controlsContainer：.container，
controlNav：true，
manualControls：#thumbnail img
}）;
I am trying to implement manual controls for the "flexslider" plugin.
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?
解决方案
You have to add the option 'controlsContainer'.
So your jQuery code should be:
$('.flexslider').flexslider({
controlsContainer: ".container",
controlNav: true,
manualControls: "#thumbnail img"
});
这篇关于jquery Flexslider手动控件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！