Cách dùng Trình tạo Slider & Carousel
- Chọn thư viện — Swiper, Splide, Glide.js hoặc Slick, rồi chọn nội dung slide: bảng demo, đường dẫn ảnh của bạn hoặc thẻ.
- Đặt số slide hiển thị trên 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ự động chạy, mũi tên và phân trang.
- Kiểm tra bản xem trước trực tiếp ở các 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 (qua CDN hoặc npm), hoặc tải về một trang HTML hoàn chỉnh.
Tạo slider mà không cần nhớ từng tùy chọn
Thư viện carousel nào cũng có hàng chục tùy chọn với tên gọi khác nhau: slidesPerView của Swiper tương ứng với perPage của Splide, perView của Glide và slidesToShow của Slick. Trình tạo này cung cấp một bộ điều khiển thống nhất và viết đúng cấu hình cho thư viện bạn chọn — kể cả breakpoint responsive, vì mỗi thư viện định nghĩa theo một cách riêng (Swiper dùng min-width theo hướng mobile-first, Splide và Glide dùng max-width theo hướng desktop-first, còn Slick dùng mảng responsive).
Nên dùng thư viện slider nào?
| 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 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 | |||
Swiper là lựa chọn phổ biến và mạnh mẽ nhất — hãy dùng nó trừ khi bạn cần thứ thật nhẹ. Splide nhẹ hơn và có khả năng truy cập tốt nhất ngay từ đầu. Glide.js là thư viện nhỏ nhất cho carousel đơn giản. Slick vẫn phổ biến trên các website cũ và theme WordPress, nhưng nó phụ thuộc vào jQuery và không còn được bảo trì, nên chỉ nên chọn khi cần khớp với dự án có sẵn.
Mẹo về hiệu năng và khả năng truy cập
- Lazy-load ảnh nằm ngoài slide đầu tiên (
loading="lazy"đã được thêm sẵn) và điều chỉnh kích thước ảnh theo chiều rộng slide — công cụ đổi kích thước ảnh và công cụ nén ảnh sẽ giúp bạn. - Tránh tự động chạy với nội dung quan trọng; nếu dùng, hãy bật tạm dừng khi rê chuột và đặt độ trễ ít nhất 4 giây.
- Luôn bật mũi tên và phân trang để người dùng bàn phím và trình đọc màn hình có thể điều hướng.
- Carousel nằm trên màn hình đầu tiên có thể làm chậm Largest Contentful Paint — hãy đảm bảo ảnh đầu tiên không bị lazy-load nếu nó là phần tử LCP của bạn.
Hướng dẫn riêng cho từng thư viện: Swiper, Splide, Glide.js và Slick. Với Webflow, hãy dán HTML vào phần tử Embed và đặt script trước </body>.
Cũng được tìm dưới tên: trình tạo carousel, tạo slider ảnh, tạo code slider, slider responsive, carousel html, javascript carousel, tạo slider swiper.
Các công cụ dùng kèm tốt với Trình tạo Slider & Carousel
- 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.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
- Trình tạo CSS Keyframes — Trình chỉnh sửa trực quan cho @keyframes.
Câu hỏi thường gặp
Thư viện slider nào là tốt nhất?
Tôi có thể dùng code trong WordPress hoặc Webflow không?
</body>.