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

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.

Demo: Các bạn tải về chạy file index.html để xem trước slide.


Để 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
<!--jQuery library-->
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<!--jCarousel library-->
<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>
<!--jCarousel skin stylesheet-->
<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>
 Nguồn: Vnhow
Tạo Slide Image bằng jcarousel Plugin của jquery Tạo Slide Image bằng jcarousel Plugin của jquery Reviewed by Hoàng Quang on 1:52:00 PM Rating: 5

14 comments:

  1. - Có trang demo nữa thì hay quá :)

    ReplyDelete
  2. Để mình kiếm cái demo nữa xem sao:p

    ReplyDelete
  3. Cho mình nhận xét đôi chút về blog nhé . Thứ nhất quá nhiều .js làm cho blog chạy chậm , bỏ các code thừa thải như : blog tồn tại vào khoảng thời gian nào , bỏ cái đồng hồ flash và nên thay thế thành 1 cái icon google + chẳng hạn , mục download thấy cũng không cần , vì nếu thế các trang như download.com.vn nó cạnh tranh với bạn lắm , nên thay thế vào đó là 1 cái banner dành cho một số người muốn đặt quảng cáo , nó sẽ tăng lợi nhuận cho bạn . Ngoài ra cái phần nhãn bài đăng nên qua blog Yolks về tùy biến cho đẹp :)) còn nhiêu thì hoàn chỉnh rồi . À cái phần comment á nó lòi ra 1 đoạn code kìa , kế bên nút reply đó bạn

    ReplyDelete
  4. Cảm ơn bạn đã góp ý nhưng cái code kế bên nút reply mình sủa hoài mà ko đc:((

    ReplyDelete
  5. Bác share cho em cái khung code với :)

    ReplyDelete
  6. khung code gi bác, em ko hiểu:p

    ReplyDelete
  7. @Quang :Cái khung chứa code màu vàng vàng đó bác :)

    ReplyDelete
  8. Thanks nhé.mình đưa vào web chạy luôn

    ReplyDelete
  9. @Thời trang công sở : bác làm được là em mừng rồi:)

    ReplyDelete
  10. thư mục web là cài gì thế....em dùng blogger chẳng hiểu gì cả :((

    ReplyDelete
  11. thư mục web là cài gì thế....em dùng blogger chẳng hiểu gì cả :((

    ReplyDelete
  12. Cái này em chưa thử làm trên blogger, nếu làm trên Blogger bác vào http://www.stylifyyourblog.com/2011/08/implementing-jcarousel-captify-in.html nè:D

    ReplyDelete
  13. Sao mình đưa vào nó cứ nằm dọc k năm ngang, và k sài được

    ReplyDelete

- Bạn có thể nhận xét bằng Bất kì tài khoản nào mà bạn muốn.
- Khi viết nhận xét, bạn vui lòng gõ Tiếng Việt có dấu.
- Bạn có thể thêm biểu tượng cảm xúc như trên Facebook.