Cách dùng Trình tạo Slick Slider
- Chọn tùy chọn cho slider Slick và nội dung slide: các khung demo, URL ảnh của bạn hoặc thẻ.
- Đặt số slide hiển thị cho máy tính, máy tính bảng và điện thoại, khoảng cách, hiệu ứng, lặp vòng, tự động chạy, mũi tên và phân trang.
- Kiểm tra xem trước trực tiếp ở các kích thước màn hình máy tính, máy tính bảng và điện thoại.
- Sao chép HTML, CSS và JavaScript (CDN hoặc npm), hoặc tải về một trang HTML hoàn chỉnh.
Giới thiệu về Slick
Slick (“carousel cuối cùng bạn cần”) từng là carousel jQuery mặc định trong nhiều năm và vẫn được nhúng trong nhiều theme WordPress, cửa hàng Shopify và website cũ. Slick hỗ trợ breakpoint responsive, chế độ căn giữa, fade, trượt dọc, lazy loading và tự động chạy. Phiên bản phát hành gần nhất (1.8.1) ra mắt năm 2017 và yêu cầu jQuery.
Các tùy chọn của Slick
| Tùy chọn | Ý nghĩa |
|---|---|
slidesToShow / slidesToScroll | Số slide hiển thị và số slide di chuyển mỗi lần nhấn |
responsive | Mảng gồm { breakpoint, settings }; mỗi cấu hình áp dụng khi chiều rộng nhỏ hơn breakpoint |
infinite | Lặp vòng các slide |
autoplay, autoplaySpeed | Tự động phát và độ trễ |
fade | Chuyển mờ dần (mỗi lần một slide) |
centerMode | Căn giữa slide đang active, với các slide lân cận hiển thị một phần |
Khoảng cách giữa các slide
Slick không có tùy chọn khoảng cách. CSS được tạo sẽ thêm margin ngang cho .slick-slide và margin âm cho .slick-list để mép ngoài luôn thẳng hàng.
Vẫn nên dùng Slick chứ?
Với website đang có sẵn jQuery và Slick, giữ nguyên để đồng bộ là hợp lý. Với dự án mới, Swiper hoặc Splide nhẹ hơn, được bảo trì tích cực, thân thiện hơn với khả năng truy cập và không cần jQuery. Hãy đổi thư viện ở trên, trình tạo sẽ chuyển đổi cài đặt của bạn.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Kích thước (min + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Phụ thuộc | Không có | Không có | Không có | jQuery |
| Hiệu ứng | Trượt, fade, cube, coverflow, flip, cards, creative | Trượt, fade | Trượt | Trượt, fade |
| Trượt dọc | Có | Có | Không | Có |
| Khả năng truy cập | Tốt (module a11y) | Xuất sắc (ARIA mặc định) | Cơ bản | Cơ bản |
| Được bảo trì | Có | Có | Chậm | Không (bản phát hành cuối năm 2017) |
| Giấy phép | MIT cho cả bốn | |||
Cũng được tìm dưới tên: slick slider, slick carousel, ví dụ slick slider, slick responsive, slick autoplay, jquery carousel, slick cdn, tạo code slick slider.
Các công cụ dùng kèm tốt với Trình tạo Slick Slider
- Trình tạo Slider & Carousel — Cấu hình carousel bằng vài cú nhấp chuột thay vì đọc tài liệu: chọn thư viện, thiết lập breakpoint, hiệu ứng và điều khiển, xem trước trực tiếp rồi sao chép HTML, CSS và JavaScript sẵn sàng dùng cho sản phẩm thật.
- Trình tạo Swiper Slider — Cấu hình Swiper 11 bằng trình chỉnh sửa trực quan — breakpoint responsive, hiệu ứng, tự động chạy, kiểu phân trang và nhiều tùy chọn khác — rồi sao chép HTML, CSS và JavaScript sẵn sàng dùng.
- Trình tạo Splide Slider — Tạo carousel Splide dễ truy cập và nhẹ mà không cần đọc tài liệu.
- Trình soạn thảo HTML online — Một sân chơi code nhẹ: chỉnh sửa HTML, CSS và JavaScript cạnh nhau, xem kết quả ngay lập tức, đọc output của console và tải trang của bạn về dưới dạng một file HTML.
Câu hỏi thường gặp
Slick có cần jQuery không?
Làm sao thêm khoảng cách giữa các slide Slick?
.slick-slide và margin âm tương ứng cho .slick-list; trình tạo sẽ viết đoạn này dựa trên giá trị khoảng cách.