react-slick 替代方案:按你用它构建了什么来决定迁移方向

react-slick 把 jQuery 时代的 slick 轮播图移植到了 React。它依然能用,但其架构早于 hooks 出现,发布也不频繁,还会给每次构建都带来一个独立的 CSS 文件。正确的替代方案与其说取决于功能,不如说取决于你的用法属于下面两个阵营中的哪一个。

react-slickEmblaSwiperreact-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 的圆点、渐隐和自动播放的场景,都属于这一类。迁移到真正的轮播引擎:

slidesToShow/slidesToScroll 对应到 Embla 的 slidesInView/slidesToScroll,或 Swiper 的 slidesPerView/slidesPerGroup,并准备好删除你自己写的箭头定位 CSS 覆盖——这两个继任者都允许你渲染自己的按钮。

阵营二:它其实是披着 centerMode 外衣的导航

另一种 slick 用法则更隐蔽:一行分类、logo、日期或筛选项,因为 slick 已经在包里了,就被 centerModefocusOnSelectvariableWidth 硬生生掰成了一个轮播图。破绽就在于你一直在和什么较劲:拖拽之后误触发点击、箭头在错误的时机出现、无法测量的项目、不想要的吸附对齐。

那一行其实就是一个菜单。react-horizontal-scrolling-menu 做到了 centerMode 一直在假装做的三件事——让点击的项目居中、依靠原生滚动并支持拖拽、以及报告哪些项目可见——体积约 ≈5.7 kB,且不需要任何滑块引擎。这两种最常见的形态可参见 可滚动标签栏分类栏 页面。

无论属于哪个阵营:迁移都比看起来要小

slick 的 API 表面很大,但对真实配置的审查会很快发现:大多数项目只用到了少数几个 prop。列出你实际用到的那些,判断每处用法属于哪个阵营,然后逐实例迁移——这两个阵营经常在同一个代码库中共存,也没有规定两者必须迁到同一个库。