Ref:http://sorgalla.com/projects/jcarousel/#Configuration
<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
//script part
// for carosel
jQuery(document).ready(function() {
var id=10;
var listOfEle = jQuery(".carousel_list_customize_"+id+" ul li");
if(listOfEle.length >= 2 ){
$(".carousel_list_customize_"+id).jCarouselLite({
btnNext: "#photo_nav_next_"+id,
btnPrev: "#photo_nav_prev_"+id,
scroll: 2,
visible: 2
});
}
});
//Html
------------------
<div style="width:200px; height:10px; float:left">
<div align="left" style="float:left" class="linkPrevious"><a id="photo_nav_prev_10"> <<</a></div>
<div align="left" class="carousel_list_customize_10" style="width:300px; float:left">
<ul id="mycarousel" style="float:left">
<?php for($vLoop=0;$vLoop<30;$vLoop++){ ?>
<li>
<a href="#">testing<?=$vLoop?></a>
</li>
<?php } ?>
</ul>
</div>
<div align="left" class="linkNext"> <a id="photo_nav_next_10">>></a> </div>
</div>
No comments:
Post a Comment