Tạo slideshow theo chiều ngang với Jquery

Bài viết này sẽ hướng dẫn bạn tạo ra một slideshow theo chiều ngang (horizontal slideshow) bằng cách sử dụng Jquery với mô tả như sau:

  • Slideshow là một chuỗi các hình ảnh được xếp theo chiều ngang nối tiếp nhau, số lượng không giới hạn, có khả năng tự động cuộn (auto-scroll) từ phải sang trái.
  • Người dùng có thể điều khiển slideshow bằng cách click vào các nút Next / Previous.
  • Khi chuỗi hình ảnh kết thúc sẽ tự động quay vòng (circle) lại hình ảnh ban đầu (hoặc cuối cùng) tùy vào hướng điều khiển.
  • Khi đưa chuột vào bất kì thành phần nào của slideshow thì auto-scroll (bao gồm cả nút Next và Previous) sẽ dừng lại.

Để tìm hiểu rõ hơn về slide bạn có thể Download phiên bản demo mới nhất

Demo mang tính chất tham khảo về cách làm, các thành phần đồ họa được đơn giản hóa tối đa để người tìm hiểu không bị rối. Dưới đây là phần minh họa trực tiếp.

Các class sử dụng trong file demo.html có vai trò rất quan trọng khi xử lý bằng Jquery, bạn có thể thay đổi class trong file demo.html và style.css theo ý mình, tuy nhiên cũng sẽ cần sửa lại các class tương ứng trong file jquery.js

Các thông số quan trọng nhất trong slideshow này bao gồm:

  • Độ rộng quy định cho class "slide-image": Độ rộng này sẽ ảnh hưởng tới độ rộng của toàn bộ slide, hãy thử thay đổi thuộc tính "width" của slide-image trong file style.css để thay sự thay đổi của toàn bộ slideshow.
  • Các thông số có thể thay đổi trong file custom.js:
    • display_image_number: Số lượng hình sẽ hiển thị ra slideshow cùng một lúc.
    • circle_method: Phương thức xuay vòng hình ảnh của slideshow, có 2 chế độ 1 và 2, bạn có thể xem ghi chú trong file js để hiểu rõ hơn.
    • anispeed: Tốc độ dịch chuyển của hình ảnh.
    • auto_scroll: kích hoạt hoặc không kích hoạt chế độ auto-scroll.
    • timeinterval: tốc độ chuyển hình ảnh trong chế độ auto-scroll.

Mọi thắc mắc về code và cách thức hoạt động của slide, bạn có thể liên hệ đến mình qua profile ở Đây

Chúc bạn thành công !

Tài liệu cùng chủ đề

Sử dụng Jquery để tạo slideshow đơn giản

Bài viết sẽ hướng dẫn bạn cách tạo ra một slideshow đơn giản bằng cách sử dụng Jquery với mô tả như sau:Slideshow sẽ điều khiển...