如何为Alice-Carousel添加自定义箭头按钮并保留滑动动画

问题原因 #

• 你直接将自定义的activeIndex状态作为prop传入组件，手动修改状态赋值的方式会跳过组件内部的滑动动画逻辑，react-alice-carousel仅在调用自身提供的实例控制方法时才会触发内置的过渡动画。
• 你自行实现的边界判断、索引加减逻辑和组件内部infinite: true的无限滚动逻辑冲突，进一步阻断了动画的触发。

修正方案 #

1. 先创建组件ref用于调用内置方法，删除自行维护的activeIndex状态和相关的自定义滑动逻辑
2. 点击自定义箭头时直接调用ref上的slidePrev()/slideNext()方法即可获得平滑动画
3. 如果需要获取当前激活的索引值，通过onSlideChange回调来更新本地状态即可

修正后的代码示例 #

import { useRef } from 'react';
import AliceCarousel, { AliceCarouselRef } from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css'; // 注意要引入官方样式，否则也可能出现动画异常

export const Carousel: React.FC<CarouselProps> = ({text }) => {
  const carouselRef = useRef<AliceCarouselRef>(null);
  // 如果你需要拿到当前索引可以添加下面的状态
  // const [activeIndex, setActiveIndex] = useState(0);

  const items = ["item1","item2","item3"]

  const slidePrev = () => {
    carouselRef.current?.slidePrev();
  };

  const slideNext = () => {
    carouselRef.current?.slideNext();
  };

  return(
    <div className="grid grid-cols-3">
      <div className="col-span-2">
        {text}
      </div>
      <div className="flex justify-end">
        <button className="px-8" onClick={slidePrev}><ArrowL/></button>
        <button className="px-8" onClick={slideNext}><ArrowR/></button>
      </div>
      <div className="col-span-3 px-10">
        <AliceCarousel
          ref={carouselRef}
          mouseTracking
          disableDotsControls
          disableButtonsControls
          items={items}
          responsive={responsive}
          controlsStrategy="responsive"
          autoPlay={true}
          autoPlayInterval={5000}
          infinite={true}
          keyboardNavigation={true}
          // 需要获取当前索引时添加下面的回调
          // onSlideChange={(e) => setActiveIndex(e.item)}
        />
      </div>
    </div>
  )
}

额外注意 #

如果修改后还是没有动画，优先检查是否正确引入了react-alice-carousel的官方css文件，缺失基础样式是动画不生效的常见原因。

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