Hướng dẫn tạo slide image sử dụng jCarousel

basic-carousel

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 plugin tại địa chỉ: jCarousel on Github

2. Giải nén tập tin vừa tải, copy file jquery.jcarousel.min.js ở thư mục dist 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.

4. Đặt đoạn mã sau vào thẻ <head> để khởi tạo jCarousel. 5. Đặt đoạn mã sau vào thẻ <body> tại vị trí muốn hiển thị slide.
Bài viết đã được cập nhật lại sau 9 năm, source code cũ đã được move qua chỗ khác.(Updated 21/7/2020). Hoặc bạn có thể xem chi tiết tại trang sản phẩm của tác giả tại đây
Hướng dẫn tạo slide image sử dụng jCarousel
4/ 5 stars - "Hướng dẫn tạo slide image sử dụng jCarousel" Hướng dẫn tạo slide image sử dụng jCarousel
Hướng dẫn tạo slide image sử dụng jCarousel Hướng dẫn tạo slide image sử dụng jCarousel Reviewed by on 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