jquery Flexslider manuel de contrôle ne fonctionne pas

Je suis en train de mettre en œuvre les contrôles manuels pour le "flexslider" plugin.

Voici mon 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>

Je veux avoir les photos miniatures de contrôle du curseur. Ce que je fais mal?

Pouvez-vous mettre votre code en jsfiddle.net s'il vous plaît.
Heres le violon: jsfiddle.net/U3h5d
Le violon aider à la compréhension de mon problème?

OriginalL'auteur James Cazzetta | 2012-03-13

  1. 19

    Vous devez ajouter l'option "controlsContainer'.

    De sorte que votre jQuery code devrait être:

    $('.flexslider').flexslider({
controlsContainer: ".container",
controlNav: true,
manualControls: "#thumbnail img"
});
    Merci!!!! Fonctionne parfaitement!
    Vous êtes les bienvenus! Content d'avoir pu aider!

    OriginalL'auteur Bart Groenhuizen