Cách dùng Tạo Slider Glide.js
- Chọn tùy chọn cho slider Glide.js 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 vô hạn, tự 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ề Glide.js
Glide.js là một slider ES6 rất nhỏ (khoảng 7 KB min + gzip), không phụ thuộc thư viện nào, được xây dựng dựa trên CSS transform. Thư viện tập trung vào những thứ thiết yếu — perView, khoảng cách, breakpoint, tự chạy, vuốt và bàn phím — còn phần markup và kiểu dáng do bạn quyết định. Đây là lựa chọn phù hợp khi dung lượng trang quan trọng hơn hiệu ứng.
Thuật ngữ trong Glide
| Tùy chọn | Ý nghĩa |
|---|---|
type: 'carousel' | Lặp vô hạn (nhân bản slide) |
type: 'slider' | Dừng ở slide đầu và cuối |
perView, gap | Số slide hiển thị và khoảng cách (px) |
focusAt: 'center' | Căn giữa slide đang active |
breakpoints | Dựa trên max-width: 767: { perView: 1 } |
data-glide-el="controls" | Điểm móc HTML cho mũi tên (data-glide-dir="<") và chấm (controls[nav]) |
Glide không làm được gì
Glide không có hiệu ứng mờ dần, dọc hay 3D, và các tính năng hỗ trợ truy cập chỉ ở mức cơ bản — hãy thêm aria-label cho các nút điều khiển (code được tạo sẵn đã có). Nếu bạn cần những tính năng đó, hãy chuyển trình tạo sang Swiper hoặc Splide; cài đặt của bạn sẽ được giữ nguyê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 | Không | Không | jQuery |
| Hiệu ứng | Trượt, mờ dần, cube, coverflow, lật, xếp thẻ, sáng tạo | Trượt, mờ dần | Trượt | Trượt, mờ dần |
| Dọc | Có | Có | Không | Có |
| Khả năng tiếp cận | 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 cuối 2017) |
| Giấy phép | MIT cho cả bốn | |||
Cũng được tìm dưới tên: glide js, glidejs carousel, glide slider, carousel nhẹ, glide js ví dụ, glide breakpoints, slider javascript không phụ thuộc.
Các công cụ dùng kèm tốt với Tạo Slider Glide.js
- 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.
- Nén JavaScript (Minify JS) — Dán JavaScript vào và nhận code đã nén, sẵn sàng cho production, từ Terser — cùng engine được Vite, webpack và Rollup sử dụng — kèm so sánh trước/sau và dung lượng gzip thực tế.
Câu hỏi thường gặp
Glide.js có hỗ trợ slider mờ dần hoặc slider dọc không?
Không. Glide chỉ trượt theo chiều ngang. Hãy dùng Swiper hoặc Splide nếu bạn cần hiệu ứng mờ dần, dọc hoặc 3D.
Tại sao chấm điều hướng của Glide không hoạt động?
Container chứa chấm cần
data-glide-el="controls[nav]" và mỗi slide có một nút với data-glide-dir="=index" — HTML được tạo sẵn đã có cả hai.Glide.js có còn được bảo trì không?
Thư viện ổn định và vẫn được dùng rộng rãi, dù các bản phát hành khá thưa. Nó không có phụ thuộc nào nên vẫn hoạt động tốt.
Tôi có thể cài Tạo Slider Glide.js như một ứng dụng web và dùng khi không có mạng không?
Có. Tạo Slider Glide.js 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.