如何在React Slick轮播中添加自动播放的初始延迟？

Question

我在我的React应用程序中使用react-slick-slider插件创建了3个图像滑块。所有三个都设置了自动播放，但我想为其中的2个滑块添加延迟，以使自动播放分别在一秒和两秒后启动，从而实现“交错转换”效果。

虽然在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

- York Wang

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

- Sarah

Answer 2

你可以尝试类似于这样的东西：

import React from "react";
import Slider from "react-slick";
export default class SimpleSlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arrows: false,
      dots: false,
      pauseOnHover: false,
      infinite: true,
      speed: 1000,
      autoplay: true,
      fade: false,
      variableWidth: false,
      slidesToShow: 1,
      slidesToScroll: 1
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState(
        {
          autoplay: false
        },
        console.log(this.state)
      );
    }, 5000);
  }

  render() {
    var settings = {
      arrows: false,
      dots: false,
      pauseOnHover: false,
      infinite: true,
      speed: 1000,
      autoplay: true,
      fade: false,
      variableWidth: false,
      slidesToShow: 1,
      slidesToScroll: 1
    };

    return (
      <div>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
        <Slider {...this.state}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
        <Slider {...this.state}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

- Magnum

---

谢谢您的回复。我尝试了您的建议，但似乎并没有起作用。带有{...delayedSettings}的滑块的自动播放停止工作了。 - York Wang

似乎是react-slick的问题，它没有将autoplay属性更新为true。这里有一个jsbin示例，将autoplay：true设置为autoplay：false可行：https://codesandbox.io/s/qz2z083wm4以下是源代码：https://github.com/akiran/react-slick/blob/48c93ed36cfb58991e6bf4d34a1a588094281d12/src/inner-slider.js不幸的是，您必须fork该repo并进行修改，以便在属性更改时更新autoplay属性以按照您想要的方式工作。祝你好运... - Magnum

Answer 3

我可以建议您这个解决方案：

将最后两个滑块的自动播放值设置为状态的一部分，初始值为false，然后在onComponentDidMount中设置2秒的超时并更新状态为true。

以下是一些代码片段：

constructor() {
  this.state = {
    autoplay: false,
  };
}

componentDidMount() {
  setTimeout(() => {
    this.setState({
      autoplay: true,
    });
  }, 2000);
}

render () {
  <Slider {...settings}> ...</Slider>
  <Slider {...settings} autoplay={this.state.autoplay}> ...</Slider>
  <Slider {...settings} autoplay={this.state.autoplay}> ...</Slider>

}

- rubentd

---

我不知道是我的设置还是其他什么问题，我按照你的建议操作了，但自动播放甚至没有开始。:/ - York Wang

Answer 4

更新autoplay属性无效，似乎react-slick在更新autoplay属性时没有重新初始化。为了解决问题，您可以尝试更新autoplaySpeed属性。

例如，在DOM加载时将autoplaySpeed设置为较长的时间，并更新为所需的时间：

class Home extends React.Component {
  constructor(props) {
    this.state = { 
      isDOMReady: false,
    };
  }

  componentDidMount() {
    window.addEventListener('load', this.startSlider);
  }

  componentWillUnmount() {
    window.removeEventListener('load', this.startSlider);
  }

  startSlider = () => {
    this.setState({ isDOMReady: true });
  }

  render() {
    const { isDOMReady } = this.state;
    return (
      <div className="home-section">
        <div className="home-pic">
          <Slider
            {...HomeSliderConfig}
            autoplaySpeed={isDOMReady ? HomeSliderConfig.autoplaySpeed : 15000}
          >
            // Your slides
          </Slider>
        </div>
     </div>
   );
}

- Vrajpal Jhala