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

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

Thời lượng đọc: Lượt xem:
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.
Updated
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 Hướng dẫn tạo slide image sử dụng jCarousel Reviewed by on Rating: 5

14 nhận xét

  1. ChoiBlogs.blogspot.com02:27 12/11/11

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

    Trả lờiXóa
  2. Quang Hoang12:35 12/11/11

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

    Trả lờiXóa
  3. Yolks17:15 13/11/11

    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

    Trả lờiXóa
  4. Quang Hoang17:20 13/11/11

    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:((

    Trả lờiXóa
  5. Đinh Công Thành16:53 12/12/11

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

    Trả lờiXóa
  6. Quang Hoang18:29 12/12/11

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

    Trả lờiXóa
  7. Đinh Công Thành22:55 12/12/11

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

    Trả lờiXóa
  8. Thiết kế web giá rẻ11:20 28/3/12

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

    Trả lờiXóa
  9. Thời trang công sở11:21 28/3/12

    tuyệt đó.thanks

    Trả lờiXóa
  10. Quang Hoang19:34 28/3/12

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

    Trả lờiXóa
  11. Nặc danh13:10 21/4/12

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

    Trả lờiXóa
  12. Nặc danh13:13 21/4/12

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

    Trả lờiXóa
  13. Quang Hoang21:26 21/4/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

    Trả lờiXóa
  14. Unknown13:07 19/2/14

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

    Trả lờiXóa

Đăng ký: Đăng Nhận xét ( Atom )