reactjs - 如何向 Alice-Carousel 添加自定义箭头按钮？

Question

我正在使用 alice-carousel ( https://github.com/maxmarinich/react-alice-carousel/blob/master/README.md ) 制作旋转木马组件，但在自定义箭头时遇到问题。代码如下

export const Carousel: React.FC<CarouselProps> = ({text }) => {
  const [activeIndex, setActiveIndex] = useState(0);

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


  const slidePrev = () => {
    activeIndex==0?(
      setActiveIndex(items.length-1)):
    setActiveIndex(activeIndex - 2);
            };

  const slideNext = () => {
    activeIndex==items.length-1?(
      setActiveIndex(0))
        : setActiveIndex(activeIndex + 2)

  };


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
        mouseTracking
        disableDotsControls
        disableButtonsControls
        activeIndex={activeIndex}
        items={items}
        responsive={responsive}
        controlsStrategy="responsive"
        autoPlay={true}
        autoPlayInterval={5000}
        infinite={true}
        keyboardNavigation={true}

    />
    </div>
    </div>

)}

上面的代码改变了activeIndex，因此改变了项目的显示顺序，但它没有“幻灯片”动画。我查看了所用库中提供的示例，但似乎无法使其顺利滑动。我做错了什么？

Answer 1

我鼓励您使用库的选项来降低实现的复杂性并停止不需要的行为。

根据文档，有两个函数 renderPrevButton 和 renderNextButton 以及 AliceCarousel 来呈现您的自定义组件(任何元素、图标、按钮，...)用于图库中的上一个 和下一个 项目。

因此，与其定义带有自定义操作处理程序的自定义按钮，不如将所需的组件传递给上述函数并为它们提供一些自定义样式。

export const Carousel: React.FC<CarouselProps> = ({text}) => {

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

  return (
    <div className="grid grid-cols-3">
      <div className="col-span-2">   // ---> you forgot to add closing string quotation mark
        {text}
      </div>
      <div className="col-span-3 px-10">
        <AliceCarousel
          mouseTracking
          disableDotsControls
          // disableButtonsControls  // ---> also remove this
          // activeIndex={activeIndex}  // ---> no need to this anymore
          items={items}
          responsive={responsive}
          controlsStrategy="responsive"
          autoPlay={true}
          autoPlayInterval={5000}
          infinite={true}
          keyboardNavigation={true}
          renderPrevButton={() => {
            return <p className="p-4 absolute left-0 top-0">Previous Item</p>
          }}
          renderNextButton={() => {
            return <p className="p-4 absolute right-0 top-0">Next Item</p>
          }}
        />
      </div>
    </div>
    )
}

注意:您需要从 AliceCarousel 中删除 disableButtonsControls 选项才能正确处理自定义按钮。此外，您不需要再使用 activeIndex 选项，因为轮播会自动处理它们。

作为示例，我通过 renderPrevButton 传递了一个 p 元素，但没有任何 onClick 操作。您可以定义自定义图标、图像或任何元素并传递它们。