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——从理念上说它最接近“现代化版的 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 做到了 centerMode 一直在假装做的三件事——让点击的项目居中、依靠原生滚动并支持拖拽、以及报告哪些项目可见——体积约 ≈5.7 kB,且不需要任何滑块引擎。这两种最常见的形态可参见 可滚动标签栏 和 分类栏 页面。
无论属于哪个阵营:迁移都比看起来要小
slick 的 API 表面很大,但对真实配置的审查会很快发现:大多数项目只用到了少数几个 prop。列出你实际用到的那些,判断每处用法属于哪个阵营,然后逐实例迁移——这两个阵营经常在同一个代码库中共存,也没有规定两者必须迁到同一个库。