--- title: "2026 年的 react-slick 替代方案" description: "从 react-slick 迁移：真正的轮播图用 Embla 或 Swiper，用 centerMode 伪装成导航的行则用 react-horizontal-scrolling-menu。一份客观的迁移指南。" canonical: "https://react-horizontal-scrolling-menu.dev/zh-cn/compare/react-slick-alternatives" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- [对比](https://react-horizontal-scrolling-menu.dev/zh-cn/compare.md)/react-slick alternatives # react-slick 替代方案：按你用它构建了什么来决定迁移方向 react-slick 把 jQuery 时代的 slick 轮播图移植到了 React。它依然能用，但其架构早于 hooks 出现，发布也不频繁，还会给每次构建都带来一个独立的 CSS 文件。正确的替代方案与其说取决于功能，不如说取决于你的用法属于下面两个阵营中的哪一个。 | | react-slick | Embla | Swiper | react-horizontal-scrolling-menu | | --- | --- | --- | --- | --- | | 是什么 | jQuery slick 的 React 移植版 | 无头轮播引擎 | 完整滑块框架 | 滚动菜单，原生滚动 | | 维护状态 | 零星 | 活跃 | 活跃 | 自 2018 年起持续维护 | | 包体积（min+gzip） | ≈15 kB + slick CSS | ≈8 kB | ≈40 kB | ≈5.7 kB | | 是否需要额外 CSS 文件 | 需要（两个） | 不需要 | 需要（核心） | 一个，或通过 shadcn 条目使用 Tailwind | | 幻灯片语义（吸附、圆点、渐隐） | 有 | 有 | 有 | 没有——刻意为之 | | 可点击项目行 | 通过 centerMode 硬掰出来 | 需要在引擎之上手工搭建 | 需要反其道而行地配置 | 核心使用场景 | 体积均为核心部分的近似值。最后一列是本站自己的库——表格如实说明这一点，而不是假装并非如此。 ## 阵营一：它本来就是真正的轮播图 主视觉滑块、图片画廊、评价轮播——凡是设计依赖 slick 的圆点、渐隐和自动播放的场景，都属于这一类。迁移到真正的轮播引擎： - 如果你自己负责所有样式，并且想要一个精简的无头核心，选 **[Embla](https://react-horizontal-scrolling-menu.dev/zh-cn/compare/embla-vs-swiper.md)**——从理念上说它最接近“现代化版的 slick”。 - 如果你大量使用了 slick 的功能列表，选 **Swiper**；slick 的每一项功能在 Swiper 中都有对应实现，通常还更好。 把 `slidesToShow`/`slidesToScroll` 对应到 Embla 的 `slidesInView`/`slidesToScroll`，或 Swiper 的 `slidesPerView`/`slidesPerGroup`，并准备好删除你自己写的箭头定位 CSS 覆盖——这两个继任者都允许你渲染自己的按钮。 ## 阵营二：它其实是披着 centerMode 外衣的导航 另一种 slick 用法则更隐蔽：一行分类、logo、日期或筛选项，因为 slick 已经在包里了，就被 `centerMode`、`focusOnSelect` 和 `variableWidth` 硬生生掰成了一个轮播图。破绽就在于你一直在和什么较劲：拖拽之后误触发点击、箭头在错误的时机出现、无法测量的项目、不想要的吸附对齐。 那一行其实就是一个菜单。[react-horizontal-scrolling-menu](https://react-horizontal-scrolling-menu.dev/zh-cn.md) 做到了 centerMode 一直在假装做的三件事——[让点击的项目居中](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/center-on-click.md)、依靠原生滚动并[支持拖拽](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/mouse-drag.md)、以及报告[哪些项目可见](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/simple.md)——体积约 ≈5.7 kB，且不需要任何滑块引擎。这两种最常见的形态可参见 [可滚动标签栏](https://react-horizontal-scrolling-menu.dev/zh-cn/scrollable-tabs.md) 和 [分类栏](https://react-horizontal-scrolling-menu.dev/zh-cn/category-rail.md) 页面。 ## 无论属于哪个阵营：迁移都比看起来要小 slick 的 API 表面很大，但对真实配置的审查会很快发现：大多数项目只用到了少数几个 prop。列出你实际用到的那些，判断每处用法属于哪个阵营，然后逐实例迁移——这两个阵营经常在同一个代码库中共存，也没有规定两者必须迁到同一个库。 [对比](https://react-horizontal-scrolling-menu.dev/zh-cn/compare.md) · [浏览全部示例](https://react-horizontal-scrolling-menu.dev/zh-cn/examples.md) · [GitHub](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu) --- More examples: Library summary for LLMs: