Code này mình rip của Joomla , code có dạng như sau :
<link rel="stylesheet" type="text/css" href="./slide.css" media="all" /> <script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.accordion.js"></script>
<script type="text/javascript" src="./jcarousellite_1.0.1_custom.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$("#jm-contain-175295014216846660591307848364").jCarouselLite({
auto: 1000,speed:2000,visible:3,
btnNext: "#jmmainwrap-jm-contain-175295014216846660591307848364 .jm-next",
btnPrev: "#jmmainwrap-jm-contain-175295014216846660591307848364 .jm-prev",
width: 760,
width_img: 100});
});
</script>
<div class="block jm-products-slider-listing" id="jmmainwrap-jm-contain-175295014216846660591307848364"
style="width:680px;border:1px solid #d9d9d9;">
<div class="jm-prev">
<img class="jm-slide-left-img" title="Left direction"
onmouseout="this.src='./img/dweb_re-left.png'"
onmouseover="this.src='./img/dweb_re-left-hover.png'" alt="Left direction"
src="./img/dweb_re-left.png"/>
</div>
<div class="jm-next">
<img class="jm-slide-right-img" title="Right direction"
onmouseout="this.src='./img/dweb_re-right.png'"
onmouseover="this.src='./img/dweb_re-right-hover.png'" alt="Right direction"
src="./img/dweb_re-right.png"/>
</div>
<div id="jm-contain-175295014216846660591307848364" class="jm-slider">
<ul class="jm-slider-ul" style="text-align:center;"><br>
<li class="jm-slider-li" style="float:left;width:200px;height:80px">
<img src="./img/bidv.png" />
</li>
<li class="jm-slider-li" style="float:left;width:200px;height:80px">
<img src="./img/donga.png" />
</li>
<li class="jm-slider-li" style="float:left;width:200px;height:80px">
<img src="./img/vietinbank.png" />
</li>
</ul>
</div>
</div>
Với số màu đỏ đậm là số hình ảnh sẽ hiển thị thấy được , mầu xanh lá cây là chiều dài khung slide , màu xanh da trời là chiều dài khung ảnh . Và nhớ căn chỉnh file CSS nữa nhé .
Để thêm nhiều ảnh bạn có thể thêm code tương tự như sau vào UL :
<li class="jm-slider-li" style="float:left;width:200px;height:80px"> <img src="./img/vietinbank.png" />
</li>
Code này mà sử dụng PHP & MySQL thì rất tiện cho quản lý .
TẢI DEMO FULL VỀ XEM TẠI ĐÂY . (http://www.mediafire.com/?r5c7njbex9f2efk)