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

您可以尝试以下方法：

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

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

更新自动播放道具不起作用，似乎在更新自动播放道具时没有重新初始化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>
   );
}

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

4 个答案: