1

如何检测用户是否单击了上一个/下一个箭头来切换 react-multi-carousel 中的自动播放值？

 return (
    <Carousel
      autoPlay={true}
      autoPlaySpeed={4500}
      customTransition="all .5"
      transitionDuration={300}
      infinite={true}
    
    >
      {movies.map((movie) => (
        <img
          key={movie.id}
          style={{ width: "100%", height: "100%" }}
          src={movie.image}
          alt={movie.title}
        />
      ))}
    </Carousel>
4

2 回答 2

2

如果您对页面切换时调用的任何内容感到好奇，

当您看到“react-multi-carousel”的文档时，会在转换页面时调用一个回调函数。

这里

<Carousel
  afterChange={(previousSlide, { currentSlide, onMove }) => {
    doSpeicalThing();
  }}
  beforeChange={(nextSlide, { currentSlide, onMove }) => {
    doSpeicalThing();
  }}
/>
于 2020-12-09T00:37:36.343 回答
1

正如 Changoon Lee在他们的回答中提到的那样，您可以使用每次滑动前后都会调用的beforeChange和回调。afterChange

如果您只想检测按钮点击（而不是键盘滑动或拖动），您可以创建新的按钮组件并将它们作为自定义箭头传递。您的自定义按钮将收到道具/状态列表；其中之一是react-multi-carousel'onClick处理程序。

您可以将自定义按钮作为道具（customLeftArrow和customRightArrow）传递给轮播。

function CustomRightArrow({ onClick }) {
  function handleClick() {
    // do whatever you want on the right button click
    console.log('Right button clicked, go to next slide');
    // ... and don't forget to call onClick to slide
    onClick();
  }

  return (
    <button
      onClick={handleClick}
      aria-label="Go to next slide"
      className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right"
    />
  );
}

function App() {
  return (
    <Carousel
      customLeftArrow={<CustomLeftArrow />}
      customRightArrow={<CustomRightArrow />}
      infinite
      keyBoardControl
    >
      {images.map((image, i) => {
        return (
          <img
            key={i}
            style={{ width: '100%', height: '100%' }}
            src={image}
            alt=""
          />
        );
      })}
    </Carousel>
  );
}
于 2020-12-09T14:54:46.037 回答