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

Question

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

虽然通过使用'setTimeOut'函数在jQuery中实现这一点相当容易，但是，我想学习'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

Answer 2

更新自动播放道具不起作用，似乎 react-slick 在更新自动播放道具时没有重新初始化。对于解决方法，您可以尝试更新 autoplaySpeed 属性。

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

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>
   );
}

Answer 3

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

将最后两个滑块的自动播放值设置为状态的一部分，init 为 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>

}

Answer 4

您可以尝试以下方法：

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>
    );
  }
}