Cách dùng Trình tạo Swiper Slider
- Chọn tùy chọn cho slider Swiper và nội dung slide: bảng demo, URL hình ả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à di độ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 ở chiều rộng máy tính, máy tính bảng và di động.
- 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ề Swiper
Swiper là thư viện slider cảm ứng được dùng rộng rãi nhất trên web: không phụ thuộc framework, được tăng tốc phần cứng và có nhiều module — điều hướng, phân trang, tự động chạy, bàn phím, con lăn chuột, chế độ tự do, lazy loading, khả năng truy cập và bảy hiệu ứng chuyển đổi. Phiên bản 11 được đóng gói thành một bundle duy nhất để dùng qua CDN hoặc dưới dạng ES module từ npm.
Các tùy chọn chính mà trình tạo này viết ra
| Tùy chọn | Chức năng |
|---|---|
slidesPerView + breakpoints | Số slide hiển thị cùng lúc; breakpoint theo hướng mobile-first (768: { slidesPerView: 2 } áp dụng từ 768 px trở lên) |
spaceBetween | Khoảng cách giữa các slide tính bằng px |
loop | Lặp vô hạn; Swiper 11 cần ít nhất slidesPerView × 2 slide để vòng lặp mượt |
autoplay | delay, pauseOnMouseEnter và disableOnInteraction: false để tự động chạy tiếp tục sau khi người dùng vuốt |
effect | fade (với crossFade), cube, coverflow, flip, cards, creative |
pagination.type | bullets, fraction hoặc progressbar |
Tạo kiểu
Swiper đọc biến CSS --swiper-theme-color cho mũi tên và chấm tròn đang active; màu nhấn bạn chọn sẽ được ghi vào biến này. Các biến khác gồm --swiper-navigation-size và --swiper-pagination-bullet-size.
Dùng npm và framework
Chuyển tùy chọn cài đặt sang npm để có import Swiper from 'swiper/bundle'. Với React, Vue hoặc Svelte, bạn có thể dùng Swiper Element (web component) hoặc các component React chính thức với cùng tùy chọn dưới dạng props.
| 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, khối lập phương, coverflow, lật, thẻ, creative | 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 2017) |
| Giấy phép | MIT cho cả bốn | |||
Cũng được tìm dưới tên: tạo slider swiper js, swiper slider, ví dụ swiper carousel, swiper breakpoint, swiper autoplay, swiper cdn, swiper coverflow, trình tạo code swiper js.
Các công cụ dùng kèm tốt với Trình tạo Swiper 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 Splide Slider — Tạo carousel Splide dễ truy cập và nhẹ mà không cần đọc tài liệu.
- 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.
- Đổi kích thước ảnh — Đổi ảnh về đúng kích thước pixel hoặc theo phần trăm, cắt ảnh theo kích thước mạng xã hội, hoặc đưa ảnh vừa khung kèm màu nền.
Câu hỏi thường gặp
Vì sao vòng lặp của Swiper không hoạt động?
Breakpoint của Swiper hoạt động thế nào?
Làm sao để đổi màu mũi tên?
--swiper-theme-color trên slider (màu nhấn sẽ làm việc này), hoặc tạo kiểu cho .swiper-button-next và .swiper-button-prev.