Multiple FlexSliders
Two, Linked Flexsliders
HTML
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<div id="#page">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg"
/>
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg"
/>
</li>
</ul>
</div>
<div id="reviews-slider" class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg"
/>
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg"
/>
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg"
/>
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg"
/>
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg"
/>
</li>
</ul>
</div>
</div>
CSS
#page {
max-width: 500px;
padding: 1em;
}
#main-slider {
border: 2px solid red;
}
#reviews-slider {
border: 2px solid blue;
}
JavaScript
// The slider being synced must be initialized first
$('#reviews-slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#main-slider'
});
$('#main-slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
sync: "#reviews-slider"
});