How to set up multiple sliders with flexslider?
flexslider, slider
Solution
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
</script>
Problem
I use flexslider, when i follow instructions on their website it doesn't work for multiple sliders, this is the code: i need a controler nav on both sliders, instructions are here: http://www.woothemes.com/flexslider/ Does anyone what i'm doing wrong? ``` <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <link rel="stylesheet" href="http://www.esens.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" /> <script src="http://www.esens.nl/assets/templates/esens/flexslider/jquery.flexslider-min.js"></script> <!-- Target sliders individually with different properties --> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('#main-slider').flexslider({ animation: 'slide', controlsContainer: '.flex-container' }); $('#secondary-slider').flexslider(); }); </script> <!-- Somewhere in the of your page --> <div id="main-slider" class="flexslider"> <ul class="slides"> <li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li> <li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li> <li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li> <li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li> </ul> </div> <br><br><br> <div id="secondary-slider" class="flexslider"> <ul class="slides"> <li><img src="http://images.forum-auto.com/mesimages/651885/Noir%20Fantome.png" /></li> <li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li> <li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li> <li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li> </ul> </div> ```