Các lựa chọn thay thế react-slick: di chuyển theo những gì bạn đã xây bằng nó
react-slick chuyển carousel slick thời jQuery sang React. Nó vẫn hoạt động, nhưng kiến trúc có trước hooks, các bản phát hành thưa thớt, và nó kéo theo một file CSS riêng vào mỗi build. Lựa chọn thay thế đúng phụ thuộc ít vào tính năng hơn là vào việc cách dùng của bạn thuộc phe nào trong hai phe.
| react-slick | Embla | Swiper | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| Đó là gì | Bản chuyển React của jQuery slick | Engine carousel headless | Framework slider đầy đủ | Menu cuộn, cuộn gốc |
| Bảo trì | Thưa thớt | Tích cực | Tích cực | Tích cực từ 2018 |
| Bundle (min+gzip) | ≈15 kB + CSS slick | ≈8 kB | ≈40 kB | ≈5.7 kB |
| Cần file CSS bổ sung | Có (hai file) | Không | Có (core) | Một file, hoặc Tailwind qua shadcn item |
| Ngữ nghĩa slide (snap, chấm, fade) | Có | Có | Có | Không — có chủ ý |
| Dải item có thể nhấp | Uốn ép qua centerMode | Tự xây trên engine | Cấu hình ngược ý đồ thiết kế | Trường hợp sử dụng cốt lõi |
Kích thước là các con số lõi gần đúng. Cột cuối cùng là thư viện riêng của trang này — bảng nói rõ điều đó thay vì giả vờ khác đi.
Phe một: đó là một carousel thực sự
Slider hero, gallery ảnh, bộ xoay vòng testimonial — bất cứ thứ gì mà chấm, fade và autoplay của slick gánh vác thiết kế. Di chuyển sang một engine carousel thực sự:
- Embla nếu bạn tự style mọi thứ và muốn một lõi headless nhỏ gọn — gần nhất với tinh thần "slick, hiện đại hóa".
- Swiper nếu bạn dùng nhiều tính năng của slick; mọi tính năng của slick đều có phiên bản tương đương trong Swiper, thường là tốt hơn.
Ánh xạ slidesToShow/slidesToScroll sang slidesInView/slidesToScroll của Embla hoặc slidesPerView/slidesPerGroup của Swiper, và chuẩn bị xóa các override CSS định vị mũi tên của bạn — cả hai bên kế thừa đều cho bạn render nút riêng.
Phe hai: đó là điều hướng khoác áo centerMode
Kiểu cài đặt slick còn lại thì âm thầm hơn: một dải danh mục, logo, ngày tháng hoặc bộ lọc, bị uốn ép thành carousel bằng centerMode, focusOnSelect và variableWidth chỉ vì slick đã có sẵn trong bundle. Dấu hiệu nhận biết là những gì bạn phải vật lộn: click kích hoạt sau khi kéo, mũi tên xuất hiện sai thời điểm, item bạn không đo được, snap bạn không hề muốn.
Dải đó vốn là một menu. react-horizontal-scrolling-menu làm ba việc mà centerMode đang giả vờ làm — căn giữa item được click, cuộn theo cách gốc với hỗ trợ kéo, và báo cáo item nào đang hiển thị — trong ≈5.7 kB mà không cần engine slider nào. Xem các trang tab cuộn và rail danh mục cho hai hình dạng phổ biến nhất.
Dù thuộc phe nào: việc di chuyển nhỏ hơn vẻ ngoài của nó
Diện tích API của slick rất lớn, nhưng kiểm tra các cấu hình thực tế cho thấy nó thu hẹp nhanh chóng: hầu hết dự án chỉ dùng một số ít prop. Liệt kê những prop bạn thực sự đặt, quyết định mỗi cách dùng thuộc phe nào, và di chuyển theo từng instance — hai phe thường cùng tồn tại trong một codebase, và không có quy tắc nào bắt cả hai phải cùng đích đến một thư viện.