<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/flexslider.css" />
<script type="text/javascript">
$(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
<style type="text/css">
.flexslider{margin-bottom:5px;}
</style>
<div id="slider" class="flexslider" style="width:640px;margin-left:110px;">
<ul class="slides">
<li><img src="images/sc1.jpg" /></li>
<li><img src="images/sc2.jpg" /></li>
<li><img src="images/sc3.jpg" /></li>
<li><img src="images/sc4.jpg" /></li>
<li><img src="images/sc5.jpg" /></li>
<li><img src="images/sc6.jpg" /></li>
<li><img src="images/sc1.jpg" /></li>
<li><img src="images/sc2.jpg" /></li>
<li><img src="images/sc3.jpg" /></li>
<li><img src="images/sc4.jpg" /></li>
<li><img src="images/sc5.jpg" /></li>
<li><img src="images/sc6.jpg" /></li>
</ul>
</div>
<div id="carousel" class="flexslider carousel" style="width:640px;margin-left:110px;">
<ul class="slides">
<li><img src="images/sc1.jpg" /></li>
<li><img src="images/sc2.jpg" /></li>
<li><img src="images/sc3.jpg" /></li>
<li><img src="images/sc4.jpg" /></li>
<li><img src="images/sc5.jpg" /></li>
<li><img src="images/sc6.jpg" /></li>
<li><img src="images/sc1.jpg" /></li>
<li><img src="images/sc2.jpg" /></li>
<li><img src="images/sc3.jpg" /></li>
<li><img src="images/sc4.jpg" /></li>
<li><img src="images/sc5.jpg" /></li>
<li><img src="images/sc6.jpg" /></li>
</ul>
</div>