React-responsive-carousel: autoplay doesn't work when start, only work when i click nev/prev one time

[lPaths]

here are my option:
autoPlay={true}
interval={2000}
infiniteLoop={true}
and it seems doesn't work correctly, please help!

[bernagl]

Im having the same error the only fix atm is install an older version and works like a charm.

Downgraded from ^3.1.45 to 3.1.33

[lPaths]

Im having the same error the only fix atm is install an older version and works like a charm.

Downgraded from ^3.1.45 to 3.1.33

it works, thank you.

[leandrowd]

It was fixed in the latest version. Feel free to update to 3.1.46

[Sujithkumara]

I have the same issue where the carousel does not start rotating on page load. Is this fixed ? What's the workaround for this? i am using 3.1.47 version

[deepalijain1]

I am also facing the same issue. autoplay not working even in latest release which is 3.1.49 and yes, autoplay works in version 3.1.33 but when it comes to the last slide, it flips to the first one , scrolling backwards, navigating all the slides in between, which is not a very good user experience. Not sure, how it is working fine in Demos. :( Am I missing something here? please advise.

here are the options, I am using:
autoPlay={true}
infiniteLoop={true}

[leognmotta]

Same problem on ^3.1.50

[hiradyazdan]

This issue still happens and is replicable in the project examples. @leandrowd

(It specifically happens on updating the state, not on initial render)

If I understand the workflow correctly this below piece or smth similar should also be implemented in the UNSAFE_componentWillReceiveProps or wherever in future React versions (17.x) will have to setupAutoPlay at earliest possible time right when props change:

https://github.com/leandrowd/react-responsive-carousel/blob/master/src/components/Carousel.tsx#L212

if (nextProps.autoPlay !== this.props.autoPlay) {
    if (this.props.autoPlay) {
        this.setupAutoPlay();
    } else {
        this.destroyAutoPlay();
    }

    this.setState({ autoPlay: this.props.autoPlay });
}

or may be use memoization to achieve that... Not quite sure it seems there have been a few re-implementations which eventually made this issue regressed and react lifecycle methods deprecation is not helping either.

FTR: https://github.com/leandrowd/react-responsive-carousel/issues/72

[hiradyazdan]

@leandrowd I had some time to work on above mentioned issue and I realized my comment was not quite spot on, and discovered that the actual problem is that in componentDidUpdate, setupAutoPlay uses the state before autoplay is set, so it won't recognize the autoplay changed and as a result it won't call the increment method on autoPlay function. So, setupAutoPlay needs to be invoked on a callback in setState.

Also second issue is autoPlay won't work on a time interval if it's not reseted in moveTo function, unless isMouseEntered: false state was set, so that resetAutoPlay method can be reached and called in moveTo function.

So, to wrap up this issue can be resolved by modifying the componentDidUpdate to the following:

....
...
..
.
if (prevProps.autoPlay !== this.props.autoPlay) {
    if (this.props.autoPlay) {

        this.setState({ autoPlay: this.props.autoPlay, isMouseEntered: false }, () => {
            this.setupAutoPlay()
        })
    } else {
        this.destroyAutoPlay()

        this.setState({ autoPlay: this.props.autoPlay })
    }
}

I have patched the method on my end and it works fine when I need to stop the autoplay on opening a modal and start again as normal once the modal is closed.

[fredsvanelli]

Still doesn't work on the latest version so far (3.2.10).

A workaround that worked for me was not to render the Carousel until the slides are loaded:

return (
    <>
      {slides.length > 0 && (
        <Carousel
          infiniteLoop
          autoPlay
          stopOnHover
          interval={5000}
        >
          {slides}
        </Carousel>
      )}
    </>
  );