Autoplay not starting unless I click on the arrow

[danielamifsud98]

I want to use the autoplay slider, but it is not playing automatically unless I click on the arrow. I am using the latest version. Can you help me out please? This is my code:

import React, {useState, useEffect} from 'react'; import AwesomeSlider from 'react-awesome-slider'; import withAutoplay from 'react-awesome-slider/dist/autoplay'; import 'react-awesome-slider/dist/styles.css'; import 'react-awesome-slider/dist/custom-animations/fold-out-animation.css';

const AutoplaySlider = withAutoplay(AwesomeSlider);

const Slideshow = ({ data }) => {

return (
    <AutoplaySlider            
        play={true}
        cancelOnInteraction={false} // should stop playing on user interaction
        interval={4000}
        bullets={false}
    >
    {
        data.map((image, index) => (
            <div key={index} data-src={require(`../assets/homepage_images/${image}`)} />
        ))
    }
    </AutoplaySlider>    
)

}

export default Slideshow;

[matanist]

I have same problem. My temporary solution

 componentDidMount() {
        fetch(`${API_BASE}ContentManagemenet/GetAllContent`).then(result => result.json()).then(data => data.set).then(data => this.setState({ slidersAndBanners: data }));
        var elem = document.getElementsByClassName('awssld__next')[0];
        //elem.style.backgroundColor = "red";
        setTimeout(function () { elem.click(); }, 2000);
        //elem.click();

    }

[Rakhletskiy]

Have the same issue. @rcaferati Can you help us without using bad code? :)

[lanadedstudio]

You're using a Class Component?

Put this line:

const AutoplaySlider = withAutoplay(AwesomeSlider);

Inside the render() method

I had the same error and solved it like this!

[lanadedstudio]

Like this:

render() { const AutoplaySlider = withAutoplay(AwesomeSlider); return ... }