如何找到具备Flickity groupCells功能的React轮播组件库？

优先推荐：Embla Carousel（React版） #

这是目前最匹配需求的原生React轮播库，无jQuery依赖，轻量高性能，完全覆盖所有功能点：

• 等效Flickity groupCells的分组滑动能力：通过配置slidesToScroll参数即可实现整组切换，支持固定数量分组、自动适配容器宽度自适应分组两种模式
• 激活态/非激活态样式区分支持：库会自动为当前居中的激活幻灯片添加is-selected类名，非激活（卫星）幻灯片默认完全可见，可直接通过CSS自定义两类状态的样式差异，比如透明度、缩放、边框等效果
• 完全符合React开发规范，提供原生Hook调用方式，无额外第三方依赖，比封装旧版jQuery Flickity的方案适配性更好

基础使用示例 #

核心配置代码如下：

import useEmblaCarousel from 'embla-carousel-react'

const GroupCarousel = () => {
  // 配置每次滚动2张（等效Flickity groupCells: 2），居中对齐
  const [emblaRef] = useEmblaCarousel({ slidesToScroll: 2, align: 'center' })

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">幻灯片1</div>
        <div className="embla__slide">幻灯片2</div>
        <div className="embla__slide">幻灯片3</div>
        <div className="embla__slide">幻灯片4</div>
      </div>
    </div>
  )
}

对应的样式区分示例：

/* 非激活态（卫星幻灯片）样式 */
.embla__slide {
  opacity: 0.6;
  transform: scale(0.85);
  transition: all 0.25s ease;
}
/* 激活态样式 */
.embla__slide.is-selected {
  opacity: 1;
  transform: scale(1);
}

备选方案：react-slick #

如果项目已经在使用react-slick，也可以通过配置实现需求：

• 分组滑动对应slidesToScroll和slidesToShow参数，开启centerMode: true即可实现居中激活、两侧非激活幻灯片可见的效果
• 激活态幻灯片会自动添加slick-center类名，直接自定义CSS即可区分状态，缺点是库体积较大，冗余功能多，性能不如Embla Carousel。

定制化方案 #

如果以上两个库都不能满足特殊业务需求，可以基于framer-motion结合React状态自行封装轻量轮播，核心逻辑100行左右即可实现，完全可控。

内容的提问来源于stack exchange，提问作者seven