<script language="Javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: 'fade',
slideshow: false,
slideshowSpeed: 8000,
animationDuration: 400,
directionNav: true,
controlNav: true,
prevText: '‹‹‹',
nextText: '›››',
pauseOnHover: true,
controlsContainer: '.carousel-nav',
manualControls: 'ul.manualControls li',
start: function(){balance_sidebar()},
after: function(){balance_sidebar()}
});
});
function balance_sidebar() { }
</script>
**CSS**
.carousel-nav{
width:205px;
margin:0 0 0 0;
padding:0 0 5px 0;
border-bottom:1px solid #ccc;
float:left;
font-weight:700;
cursor:pointer;
font-family:arial, helvetica, verdana, sans-serif;
letter-spacing:0;
}
.carousel-nav ul{
margin:0 0 0 0;
padding:0;
list-style:none;
float:left;
height:12px;
overflow: hidden;
}
.carousel-nav ul li{
margin:0 0 0 0;
padding:0;
float:left;
}
.carousel-nav ul.manualControls li{
margin:0 15px 0 0;
padding:0 0 5px 0;
}
**HTML**
<div class="carousel-nav">
<ul class="manualControls">
<li>
slide1
</li>
<li>
slide2
</li>
<li>
slide3
</li>
<li>
slide4
</li>
<li>
slide5
</li>
<li>
slide6
</li>
<li>
slide7
</li>
<li>
slide8
</li>
<li>
slide9
</li>
<li>
slide10
</li>
<li>
slide11
</li>
</ul>
</div>