如何向 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 来呈现您的自定义组件（任何元素、图标、按钮...）图库中的 Prev 和 Next 项。

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

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 选项，因为轮播会自动处理它们。

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

Answer 2

嗨，renderNextButton/renderPrevButton 你必须先声明一个函数，然后将该函数传递给 Alice Carousel 的渲染选项。

import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';


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

  const items = ["item1","item2","item3"]
  
  const renderNextButton = ({ isDisabled }) => {
    return <ArrowForwardIosIcon style={{ position: "absolute", right: 0, top: 0 }} />
  };

  const renderPrevButton = ({ isDisabled }) => {
    return <ArrowBackIosIcon style={{ position: "absolute", left: 0, top: 0 }} />
  };

  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={renderPrevButton}
          renderNextButton={renderNextButton}
        />
      </div>
    </div>
    )
}

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

How to add custom arrow buttons to Alice-Carousel?

carousel

typescript

reactjs