Autoplay

[sami616]

Not an issue per se, but is there a simple way to introduce an autoplay feature?

[Stanko]

Hello @sami616, This slider is small component I wrote year ago, and I'm actively working on it.

But you can make simple slideshow - set a timer and update selected prop that you are passing to the slider component.

Something like this:

// Parent component
export default class ParentSlideshow extends Component {
  constructor() {
    super();

    this.state = {
      selected: 0,
    };
  }

  componentDidMount() {
    const SLIDES_COUNT = 5;
    
    this.intervalID = setInterval(() => {
      const { selected } = this.state;
      
      this.setState({
        // Set the next slide, and make sure we return to zero
        // when selected is larger than SLIDES_COUNT
        selected: selected + 1 % SLIDES_COUNT,
      });
    }, 1000);
  }

  componentWillUnmount() {
    // clear interval
    clearInterval(this.intervalID);
    this.intervalID = null;
  }

  render() {
    const { selected } = this.state;
    
    return (
      <Slider
        loop={ true }
        showNav={ false }
        selected={ selected }>
        <div style={{ background: '#21BB9A' }}>A</div>
        <div style={{ background: '#329ADD' }}>B</div>
        <div style={{ background: '#9A5CB9' }}>C</div>
        <div style={{ background: '#E64C3C' }}>D</div>
        <div style={{ background: '#2D3F52' }}>E</div>
      </Slider>
    );
  }
}

Hope that helps, cheers!