javascript - 如何在 React Slick slider 中为自动播放添加初始延迟？

Question

我在 React 应用程序中使用 react-slick-slider 插件创建了 3 个图像 slider 。所有 3 个都将自动播放设置为 true，但我想为其中的 2 个 slider 添加延迟，以便自动播放分别在一秒和两秒后开始，以实现“交错过渡”效果。

虽然这在 jQuery 中通过使用“setTimeOut”函数很容易实现，但是，我想学习“react”/“javascript”做事的方式。任何指针将不胜感激。

这是我的组件设置:

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

不是最干净的，但也许试试这样的东西？

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