--- title: "Các lựa chọn thay thế react-slick năm 2026" description: "Di chuyển khỏi react-slick: Embla và Swiper cho carousel thực sự, react-horizontal-scrolling-menu cho các dải dùng centerMode làm điều hướng. Hướng dẫn di chuyển trung thực." canonical: "https://react-horizontal-scrolling-menu.dev/vi/compare/react-slick-alternatives" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- [So sánh](https://react-horizontal-scrolling-menu.dev/vi/compare.md)/Các lựa chọn thay thế react-slick # 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](https://react-horizontal-scrolling-menu.dev/vi/compare/embla-vs-swiper.md)** 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](https://react-horizontal-scrolling-menu.dev/vi.md) làm ba việc mà centerMode đang giả vờ làm — [căn giữa item được click](https://react-horizontal-scrolling-menu.dev/vi/examples/center-on-click.md), cuộn theo cách gốc với [hỗ trợ kéo](https://react-horizontal-scrolling-menu.dev/vi/examples/mouse-drag.md), và báo cáo [item nào đang hiển thị](https://react-horizontal-scrolling-menu.dev/vi/examples/simple.md) — trong ≈5.7 kB mà không cần engine slider nào. Xem các trang [tab cuộn](https://react-horizontal-scrolling-menu.dev/vi/scrollable-tabs.md) và [rail danh mục](https://react-horizontal-scrolling-menu.dev/vi/category-rail.md) 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. [So sánh](https://react-horizontal-scrolling-menu.dev/vi/compare.md) · [Xem tất cả ví dụ](https://react-horizontal-scrolling-menu.dev/vi/examples.md) · [GitHub](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu) --- More examples: Library summary for LLMs: