How to add an initial delay to autoplay in React Slick slider?

Question

I created 3 image sliders using the react-slick-slider plugin in my React app. All 3 have their autoplay set to true, but I want to add a delay to 2 of the sliders so that autoplay kicks in one and two seconds later respectively to achieve the "staggering transition" effect.

While this is fairly easy to achieve in jQuery by using 'setTimeOut' function, however, I'd like to learn the 'react'/'javascript' way of doing things. Any pointers would be greatly appreciated.

Here's my component setup:

import React from 'react'
import Slider from 'react-slick'

import './art-slider.sass'

const settings = {
  arrows: false,
  dots: false,
  pauseOnHover: false,
  infinite: true,
  speed: 3000,
  autoplay: true,
  fade: true,
  variableWidth: false,
  slidesToShow: 1,
  slidesToScroll: 1,
}

const Art = () => (
  <div className="art-board">
    <Slider {...settings}>
      <div>
        <div className="slider-1">
      </div>
      <div>
        <div className="slider-2">
      </div>
      <div>
        <div className="slider-3">
      </div>
    </Slider>
    <Slider {...settings}>
      <div>
        <div className="slider-4">
      </div>
      <div>
        <div className="slider-5">
      </div>
      <div>
        <div className="slider-6">
      </div>
    </Slider>
    <Slider {...settings}>
      <div>
        <div className="slider-7">
      </div>
      <div>
        <div className="slider-8">
      </div>
      <div>
        <div className="slider-9">
      </div>
    </Slider>
  </div>
)

export default Art

Answer 1

Not the cleanest, but maybe try something like this?

import React from 'react'
import Slider from 'react-slick'

var settings = {
  infinite: true,
  cssEase: "linear",
  slidesToShow: 1,
  slidesToScroll: 1
}

var slider1Settings = { ...settings, autoplaySpeed: 1000 }
var slider2Settings = { ...settings, autoplaySpeed: 2000 }

class Carousel extends React.Component {
  constructor(props) {
    super(props)
    this.delay = this.delay.bind(this)
  }

  delay(slider, amount) {
    setTimeout(() => {
      slider.slickPlay()
    }, amount)
  }
  componentDidMount() {
    this.delay(this.slider1, 3000)
    this.delay(this.slider2, 1000)
  }
  render() {
    return (
      <div className="art-board">
        <Slider {...settings}>
          <div>
            <div className="slider-1">1</div>
          </div>
          <div>
            <div className="slider-2">2</div>
          </div>
          <div>
            <div className="slider-3">3</div>
          </div>
        </Slider>
        <Slider {...slider1Settings} ref={slider1 => (this.slider1 = slider1)}>
          <div>
            <div className="slider-4">4</div>
          </div>
          <div>
            <div className="slider-5">5</div>
          </div>
          <div>
            <div className="slider-6">6</div>
          </div>
        </Slider>
        <Slider {...slider2Settings} ref={slider2 => (this.slider2 = slider2)}>
          <div>
            <div className="slider-7">7</div>
          </div>
          <div>
            <div className="slider-8">8</div>
          </div>
          <div>
            <div className="slider-9">9</div>
          </div>
        </Slider>
      </div>
    )
  }
}

export default Carousel