如何向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，从而改变了项目的显示顺序，但它没有使用“slide”动画。我已经查看了库中提供的示例，但似乎无法使其平滑地滑动。我做错了什么？

- Dworo

Answer 1

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

根据文档，AliceCarousel有两个函数renderPrevButton和renderNextButton，用于渲染你的自定义组件（任何元素、图标、按钮等...）作为画廊上前一个和下一个项目的按钮。

因此，与其定义一个带有自定义操作处理程序的自定义按钮，不如将您想要的组件传递给上述函数，并为其提供一些样式以进行自定义。

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操作。 您可以定义自己的自定义图标、图片或任何元素，并将它们传递。

- nima

---

谢谢您的回答。但是它似乎没有显示我传递的图标或元素，例如renderPrevButton={() => { <div><ArrowL/></div>}}。我还想自定义这些控件的位置（在滑块上方的右上角）。 - Dworo

我尝试了您提供的代码，但没有显示任何元素/按钮或添加的文本。有什么原因吗？ - Dworo

你从 AliceCarousel 中移除了 "disableButtonsControls" 和 "activeIndex" 属性了吗，@Dworo？ - nima

renderPrevButton={( )=>{return <ArrowL />}} 最终起作用了。 - Dworo

标记为正确答案，因为它是正确的指导。 - Dworo

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>
    )
}

- Barabba