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

【问题标题】：How to add an initial delay to autoplay in React Slick slider?如何在 React Slick 滑块中为自动播放添加初始延迟？
【发布时间】：2019-03-24 19:31:32
【问题描述】：

我在我的 React 应用程序中使用 react-slick-slider 插件创建了 3 个图像滑块。所有 3 个都将其自动播放设置为 true，但我想为其中 2 个滑块添加延迟，以便分别在 1 秒和 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

【问题讨论】：

标签： javascript reactjs gatsby slick.js react-slick

【解决方案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

【讨论】：

【解决方案2】：

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

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

一些sn-ps代码：

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>

}

【讨论】：

我不知道是我的设置还是什么，我听从了你的建议，但自动播放甚至没有开始：/

【解决方案3】：

您可以尝试以下方法：

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

【讨论】：

感谢您的回复。我尝试了您的建议，但似乎不起作用。具有 {...delayedSettings} 的滑块的自动播放停止工作
这似乎是 react-slick 没有将 autoplay 属性更新为 true 的问题。这是一个将 autoplay: true 设置为 autoplay: false 的 jsbin 工作：codesandbox.io/s/qz2z083wm4 这是源代码：github.com/akiran/react-slick/blob/… 不幸的是，您必须分叉存储库并对其进行修改以更新自动播放道具才能播放改变道具让它按照你想要的方式工作。祝你好运...

【解决方案4】：

更新自动播放道具不起作用，似乎 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>
   );
}

【讨论】：