How to set up multiple sliders with flexslider? - slider

Question

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>

Answer 1

<!-- 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>

Answer 2

My Live solution in Jsfiddle here
<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
/*-----------------------------------------------------------------------------------*/
/* DOC Javascript JS */
/*-----------------------------------------------------------------------------------*/
(function($, window){
/*-----------------------------------------------------------------------------------*/
window.app = {};
/*--------------------------------------------------------------------------------*/
app.uiSlide =
{
/* Test elem and Call flexslider() */
flexslider: function ( elem, params ) {
// Test if elem exist in dom
if( $(elem).length > 0 ){
// Call function
$(elem).flexslider(params);
};
},
/* Define and init all elem */
init: function () {
// 1 Define Objects Collection
var elem =
[
// Slider A
{
slide: '#flexslider-a',
param: {
animation: 'slide',
controlsContainer: '.flex-container'
}
},
// Slider B
{
slide: '#flexslider-b',
param: {
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
smoothHeight: true,
}
}
// Add Slide XYZ
//...
//...
];
// 2 Init All
for( var i=0; i < elem.length; i++ ){
this.flexslider( elem[i].slide, elem[i].param )
}
}
};
/* init all function() */
app.start =
function(){
this.uiSlide.init()
};
/*--------------------------------------------------------------------------------*/
$(document).ready(function(){app.start();})
/*-----------------------------------------------------------------------------------*/
})(jQuery, window)
</script>
<!-- Somewhere in the of your page -->
<!-- SLIDER A -->
<div id="flexslider-a" 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>
<!-- SLIDER B -->
<div id="flexslider-b" 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>

Answer 3

Solved by OP on question:
I have it figured out, i was using some old files. I use flexslider,
when i follow instructions on their website it doesn't work for
multiple sliders, this is the code:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="http://www.xxx.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" />
<script src="http://www.xxx.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>