Timer does not reset when the carousel image is changed through indicators

[roboGOD]

Issue

Timer does not reset when the carousel image is changed through indicators in case stopOnHover is false.

Steps to reproduce

1. Create a basic carousel with autoPlay as true and stopOnHover as false.
2. Change the image through the indicators.

Actual: If the image is about to change with autoPlay and we change the image through the indicators, the timer does not reset and sometimes the image automatically changes immediately after it is changed through the indicators. So, the user is not able to see the image and has to change again.

Expected: The timer should reset when the image is changed through the indicators.

Screengrab

Links

Code Sandbox

[Vitali883]

Same issue. Fixed?

[roboGOD]

Same issue. Fixed?

I fixed it by manually calling the resetAutoPlay function in onChange callback using the ref of the Carousel. Sample code below.

1. Create a ref:

const carouselRef = React.useRef(null);

2. Pass the ref in the Carousel and call the resetAutoPlay function in onChange:

    <Carousel
      ref={carouselRef}
      stopOnHover={false}
      autoPlay
      onChange={() => {
        if (carouselRef.current) {
          carouselRef.current.resetAutoPlay();
        }
      }}
    >
       ...
    </Carousel>

[Vitali883]

Thank you! Works for me!