rcaferati / react-awesome-slider

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱

Home Page:https://fullpage.caferati.me

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Autoplay works only after click

lanadedstudio opened this issue · comments

I implemented this plugin in my project, but the autoplay works only after click in the arrows. I would like the slider to start automatically.

This is my script:
<AutoplaySlider
play={true}
cancelOnInteraction={false} // should stop playing on user interaction
interval={6000}
organicArrows={false}
bullets={false}>

Hi @lanadedstudio. Code sample you've provided looks OK. Please make sure that you:

  1. Added following imports to the component
import AwesomeSlider from 'react-awesome-slider';
import withAutoplay from 'react-awesome-slider/dist/autoplay';
  1. Instantiated AutoplaySlider in your component like this
const AutoplaySlider = withAutoplay(AwesomeSlider);

sorry, I already put these lines in the code, but it doesn't work. The slide starts only after clicking the arrows.

I find my error! In Class Components, this line:

const AutoplaySlider = withAutoplay(AwesomeSlider);

must be inside the render() method, I had put it outside...

Good job! 👍 To be honest I have this declaration outside function in js component and it's working fine 😄

const AutoplaySlider = withAutoplay(AwesomeSlider);

function Home() {
 return (
    <Layout
       <AutoplaySlider
                 play={true}
                 cancelOnInteraction={false} // should stop playing on user interaction
                 interval={6}
                 <...>
    </Layout>
 );
}

Don't forget to close the issue if you've solved it =)