--- title: "Các lựa chọn thay thế Swiper nhẹ hơn cho React" description: "Đang tìm một lựa chọn thay thế Swiper nhẹ hơn trong React? Embla và keen-slider cho carousel thực sự, react-horizontal-scrolling-menu cho các dải hình dạng menu. So sánh kích thước." canonical: "https://react-horizontal-scrolling-menu.dev/vi/compare/swiper-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ế Swiper # Các lựa chọn thay thế Swiper cho React, theo những gì bạn thực sự đang muốn thoát khỏi Không ai rời bỏ Swiper vì nó tệ — nó là slider đầy đủ nhất hiện có. Người ta rời bỏ vì trọng lượng (≈40 kB trước khi tính module), vì phải kế thừa DOM và CSS của nó, hoặc vì "slider" của họ chưa bao giờ thực sự là slide. Mỗi lời phàn nàn có một câu trả lời tốt nhất khác nhau. | | Swiper | Embla | keen-slider | react-horizontal-scrolling-menu | | --- | --- | --- | --- | --- | | Bundle (core, min+gzip) | ≈40 kB | ≈8 kB | ≈7 kB | ≈5.7 kB | | Mô hình | Slide, đầy đủ sẵn | Slide, headless | Slide, engine tối giản | Item trong một dải cuộn gốc | | Hiệu ứng & module | Phong phú nhất hiện có | Plugin / tự làm | Một số có sẵn | Không có — thay bằng công thức | | Chiếm tầng cử chỉ | Có (transform) | Có (transform) | Có (transform) | Không — trình duyệt tự cuộn | | Khả năng hiển thị theo item | Sự kiện chỉ số slide | Sự kiện chỉ số slide | Sự kiện chỉ số slide | Có sẵn (useIsVisible) | | Nên đổi khi | — | Đằng nào bạn cũng tự style mọi thứ | Slider tối giản, không khóa chặt vào React | "Slide" thực chất là các item có thể nhấp | Kích thước là các con số lõi gần đúng — kích thước của Swiper tăng theo các module được import, điều đó cũng có nghĩa là một bản build Swiper đã cắt gọn có thể nhỏ hơn danh tiếng của nó. ## Thoát khỏi số kilobyte: Embla hoặc keen-slider Nếu sản phẩm là một carousel thực sự — snap, một trang slide tại một thời điểm — các engine nhẹ gần như có thể thay thế trực tiếp: - **[Embla](https://react-horizontal-scrolling-menu.dev/vi/compare/embla-vs-swiper.md)** (≈8 kB): headless, vật lý xuất sắc, hook React hạng nhất, engine bên dưới carousel của shadcn/ui. Bạn tự mang toàn bộ markup và CSS — đó chính là trọng tâm. - **keen-slider** (≈7 kB): một engine tối giản không phụ thuộc framework, tốt khi cùng một slider phải chạy trên cả bề mặt React và không phải React. Cả hai vẫn giữ mô hình slide dựa trên transform, vì vậy các hiệu ứng như fade hay coverflow vẫn phải tự làm — nếu bạn phụ thuộc vào những thứ đó, một bản build Swiper đã cắt gọn thành thật là câu trả lời tốt hơn việc tự triển khai lại chúng. ## Thoát khỏi mô hình slide: trường hợp hình dạng menu Lối thoát còn lại dành cho các công trình mà ngữ nghĩa slide của Swiper chưa bao giờ thực sự cần thiết: dải danh mục, tường logo, dải tab, thanh chip, rail sản phẩm. Dấu hiệu nhận biết là cấu hình như `slidesPerView: 'auto'` kết hợp `freeMode: true` — cặp đó là Swiper đang bị bắt giả làm cuộn gốc. [react-horizontal-scrolling-menu](https://react-horizontal-scrolling-menu.dev/vi.md) (≈5.7 kB) chính là cuộn gốc đó, cộng thêm những phần trình duyệt không cung cấp sẵn: [khả năng hiển thị theo item](https://react-horizontal-scrolling-menu.dev/vi/examples/simple.md), [scroll-to-item](https://react-horizontal-scrolling-menu.dev/vi/examples/scroll-to-item.md), mũi tên nhận biết cạnh và [kéo mà không phá vỡ click](https://react-horizontal-scrolling-menu.dev/vi/examples/mouse-drag.md). Không hiệu ứng, không snap, không mô phỏng cử chỉ — xem các trang [Netflix-row](https://react-horizontal-scrolling-menu.dev/vi/netflix-row.md), [tabs](https://react-horizontal-scrolling-menu.dev/vi/scrollable-tabs.md) và [chip-bar](https://react-horizontal-scrolling-menu.dev/vi/filter-chips.md), hoặc [bảng đầy đủ](https://react-horizontal-scrolling-menu.dev/vi/compare.md). ## Một lời cảnh báo công bằng cho cả hai hướng Di chuyển khỏi Swiper để giảm trọng lượng rồi sau đó phải tự xây autoplay, phân trang, thông báo a11y và hiệu ứng là cách một vấn đề 40 kB trở thành một vấn đề tốn cả tháng công. Chỉ đổi sang một engine nhẹ hơn khi cách dùng của bạn thực sự là một tập con — và chỉ đổi sang scrolling menu khi ngữ nghĩa slide vốn dĩ chỉ là giả tạo từ đầu. Nếu bạn dùng đến chiều sâu của Swiper, hãy giữ Swiper. [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: