Lory Carousel Slider có tính năng CSS Animation & Touch Support

Trong số tất cả bổ trợ băng chuyền trực tuyến Tôi phải đội mũ Lory. Thật là một khái niệm đơn giản nhưng nó dễ dàng là một trong thanh trượt mạnh nhất trên web.

Các phiên bản rút gọn tổng cộng khoảng 7KB không nhỏ nhưng chắc chắn không tệ cho một thanh trượt băng chuyền hỗ trợ cảm ứng.

Bạn có thể thêm plugin này vào bất kỳ trang web nào vì nó chạy trên jQuery hoặc vanilla JS đơn giản. Nó có thể chạy với không phụ thuộc đó là tuyệt vời cho khả năng tương thích.

Lory cũng là một trong số ít các plugin không suy giảm trong các trình duyệt cũ hơn. nó là được hỗ trợ đầy đủ trong IE10+, và các phiên bản cũ hơn vẫn có thể chạy thanh trượt, chỉ cần không có hình ảnh động và bổ sung nhỏ.

Bạn sẽ phải tự mình làm tất cả các chương trình mã hóa nếu bạn muốn thêm nội dung nhưng nó đơn giản đến ngạc nhiên. Bạn có thể xác định mức độ lớn để tạo mỗi bảng, thời gian tạo hiệu ứng và cách xử lý các trình duyệt đáp ứng.

Kiểm tra trang chủ Lory cho mã nguồn và chi tiết về thiết lập.

Bắt đầu bằng cách thêm thư viện Lory JS đến trang web của bạn cái đầu phần, hoặc là một plugin jQuery hoặc một thư viện vanilla. Tất cả các phiên bản hiện đang được lưu trữ trên CDN của Cloudflare, vì vậy thật dễ dàng để bao gồm một bản sao mà không cần tải xuống.

Với tệp JavaScript được cài đặt, bạn sẽ muốn tạo một danh sách có thứ tự HTML với nội dung slide, nhưng Lory đi kèm với một vài lớp được xác định trước vì vậy nó tốt để gắn bó với mô hình của họ.

Đây là một số mã mẫu lấy từ repo Lory GitHub chính:

Bây giờ trong jQuery (hoặc JS đơn giản), bạn có thể thiết lập một cuộc gọi chức năng. Nó sẽ trông giống như thế này:

 $ ('. js_slider'). lory (infinite: 1);

Lưu ý vô hạn tùy chọn chỉ là một trong nhiều tính năng bạn có thể tùy chỉnh. Và bạn luôn có thể thay đổi .js_slider lớp học phù hợp với nhu cầu của bạn.

Trong khi phát triển với plugin này, bạn có thể có hàng tấn câu hỏi tùy chỉnh. Tôi rất muốn giới thiệu duyệt tài liệu ở dưới cùng của trang GitHub.

Có lẽ không phải là vị trí tốt nhất cho tài liệu nhưng rất may chúng khá nhỏ. Bạn chỉ có khoảng 10 lựa chọn để tùy chỉnh và có thể 10-12 sự kiện khác nhau bạn có thể tinker với. Thông tin này cũng có thể được tìm thấy ở dưới cùng của trang web Lory nhưng nó dễ đọc hơn trên GitHub.

Cập nhật không thường xuyên nhưng bạn luôn có thể viết một yêu cầu vấn đề trên GitHub nếu bạn gặp vấn đề. Nếu bạn thực sự có vấn đề với mã, có lẽ bạn sẽ dễ dàng giải quyết chúng hơn trên Stack Overflow.

Dù bằng cách nào, bạn có thể bắt đầu khá nhanh sử dụng tài liệu Cloudflare CDN và GitHub. Và nếu bạn đang tìm kiếm một bản demo trực tiếp với mã kiểm tra mục CodePen này.