Cách dùng Trình tạo Splide Slider
- Chọn tùy chọn cho slider Splide và nội dung slide: khối demo, URL hình ảnh hoặc thẻ của riêng bạn.
- Đặt số slide hiển thị cho máy tính, máy tính bảng và điện thoại, cùng khoảng cách, hiệu ứng, lặp, tự động chạy, mũi tên và phân trang.
- Kiểm tra xem trước trực tiếp ở chiều rộng 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ề Splide
Splide là một slider không phụ thuộc thư viện khác, khoảng 12 KB (min + gzip), nổi bật nhờ khả năng truy cập: tự động thêm ARIA roles, nhãn, live regions và hỗ trợ bàn phím theo mẫu WAI-ARIA carousel. Splide hỗ trợ chế độ lặp và fade, tự động chạy kèm nút phát/tạm dừng, lazy loading, slider dọc và các tiện ích mở rộng như cuộn tự động và video.
Các tùy chọn do trình tạo sinh ra
| Tùy chọn | Ý nghĩa |
|---|---|
type | slide, loop hoặc fade (fade chỉ hiển thị một slide; dùng rewind để lặp lại) |
perPage, gap | Số slide mỗi trang và khoảng cách dưới dạng độ dài CSS |
breakpoints | Ưu tiên màn hình lớn: 1023: { perPage: 2 } áp dụng đến 1023 px |
autoplay, interval, pauseOnHover | Tự động chạy |
focus: 'center' | Căn giữa slide đang hoạt động |
direction: 'ttb' + height | Slider dọc (bắt buộc có chiều cao cố định) |
drag: 'free' | Chế độ cuộn tự do có quán tính |
Tạo kiểu cho Splide
Nhập splide.min.css (hoặc CSS lõi nếu bạn muốn kiểm soát hoàn toàn), sau đó ghi đè .splide__arrow và .splide__pagination__page.is-active. CSS được tạo sẵn sẽ làm điều này với màu nhấn của bạn.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Kích thước (JS, min + gzip) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Phụ thuộc | Không | Không | Không | jQuery |
| Hiệu ứng | Trượt, fade, cube, coverflow, flip, cards, creative | Trượt, fade | Trượt | Trượt, fade |
| 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: splide js, tạo slider splide, splide carousel, splide breakpoints, splide autoplay, splide cdn, carousel dễ truy cập.
Các công cụ dùng kèm tốt với Trình tạo Splide 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.
- Tạo Slider Glide.js — Tạo carousel Glide.js tối giản — slider khoảng 7 KB, không phụ thuộc thư viện nào — với breakpoint responsive, mũi tên và chấm, rồi sao chép code.
- Kiểm tra tương phản màu — Nhập màu chữ và màu nền để xem tỷ lệ tương phản WCAG chính xác, kết quả đạt/không đạt ở từng mức, điểm APCA và các gợi ý sửa chỉ với một cú nhấp, giữ nguyên sắc độ.
Câu hỏi thường gặp
Tại sao Splide kiểu fade chỉ hiển thị một slide?
Kiểu fade luôn chỉ hiển thị một slide mỗi trang. Hãy dùng kiểu slide hoặc loop nếu bạn cần nhiều slide.
Breakpoints của Splide là min-width hay max-width?
Mặc định là max-width (ưu tiên màn hình lớn). Đặt
mediaQuery: 'min' để chuyển sang ưu tiên màn hình nhỏ.Splide có dễ truy cập không?
Có. Mặc định Splide áp dụng thuộc tính ARIA, điều hướng bàn phím và thông báo cho trình đọc màn hình, đây là ưu điểm chính của thư viện.
Tôi có thể cài Trình tạo Splide Slider như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo Splide Slider là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.