如何在React Slick滑块中添加初始延迟以自动播放？
如何在React Slick滑块中添加初始延迟以自动播放？
提问于 2018-10-20 05:45:18
我使用React应用程序中的react-slick-slider插件创建了3个图像滑块。所有3个都有他们的自动播放设置为真，但我想增加一个延迟的滑块，以便自动播放分别在一秒和两秒后踢，以达到“令人震惊的过渡”的效果。
虽然在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回答 4
Stack Overflow用户
发布于 2018-11-07 06:09:53
不是最干净的，但也许可以试试这样的东西？
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
Stack Overflow用户
发布于 2018-10-20 05:54:25
你可以尝试一些类似的东西：
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>
);
}
}Stack Overflow用户
发布于 2018-10-20 06:33:32
我可以向你推荐这个解决方案：
将最后两个滑块的自动播放值设置为状态的一部分，将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>
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52900291
复制相关文章
相似问题
腾讯云开发者
