How to detect if the user has clicked on the arrows in react-multi-carousel?

Question

How can I detect if the user has clicked the previous/next arrow to toggle the value of the autoplay in 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>

Answer 1

As Changoon Lee mentioned in their answer, you can use the beforeChange and afterChange callbacks which are invoked each time before and after a sliding.

If you only want to detect button clicks (and not keyboard slides or drags), you can create new button components and pass them as custom arrows. Your custom buttons will receive a list of props/state; one of them is the react-multi-carousel's onClick handler.

You can pass your custom buttons to the Carousel as props (customLeftArrow and 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>
  );
}