logo标签列表

jQuery Flexslider 手动控制无法使用

jqueryhtmljquery-pluginspluginsflexslider
8
我将尝试为插件"flexslider"实现手动控制。
这是我的代码:
<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>

我想要将缩略图作为滑块控件。我做错了什么吗？
请把你的代码放到 http://jsfiddle.net/ 上，可以吗？ - Deadlykipper
@Deadlykipper 这是 JSFiddle 链接：http://jsfiddle.net/U3h5d/ - James Cazzetta
@Deadlykipper 这个小提琴有助于理解我的问题吗？ - James Cazzetta
1个回答
19

您需要添加选项 'controlsContainer'。

因此，您的jQuery代码应该是：

$('.flexslider').flexslider({
    controlsContainer: ".container",
    controlNav: true,
    manualControls: "#thumbnail img"
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接