Tạo Slide Image bằng jcarousel Plugin của jquery

Thứ Năm, 10 tháng 11, 2011

Tạo Slide Image bằng jcarousel Plugin của jquery

Nguồn vnhow

Trong hướng dẫn này, mình sẽ sử dụng jQuery với Plugin jCarousel để hiển thị slide các hình nhỏ và chú thích. Hình thu nhỏ có thể được cuộn với việc sử dụng các nút trước và sau khi bất kỳ hình ảnh thu nhỏ, các chú thích hoặc tiêu đề của hình nhỏ sẽ trượt lên.

Để thao tác bạn làm như sau:

1. Tải jCarousel pulugin tại địa chỉ: http://sorgalla.com/projects/download-zip.php?jcarousel

2. Giải nén tập tin vừa tải, copy 2 thư mục lib(chứa thư viện javascript) và skins(chứa các giao diện cho slide) vào thư mục web của bạn.

3. Đặt đoạn mã sau vào thẻ <head> của trang web để load các thư viện javascript và css.

<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>

<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />

4. Đặt đoạn mã sau vào thẻ <head> để khởi tạo jCarousel.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 4
});
});
</script>

5. Đặt đoạn mã sau vào thẻ <body> tại vị trí muốn hiển thị slide.

<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="images/image1.jpg" width="75" height="75" alt="" /></li>
<li><img src="images/image2.jpg" width="75" height="75" alt="" /></li>
<li><img src="images/image3.jpg" width="75" height="75" alt="" /></li>
<li><img src="images/image4.jpg" width="75" height="75" alt="" /></li>
</ul>

6. Và kết quả hiển thị slide trên trang web.