[英]React-slick: how sync 3 sliders
I'm using react-slick slider syncing with 3 sliders. 我正在使用带有3个滑块的react-slick滑块同步。 With 2 sliders it works fine but when I try with 3 sliders with 2 refs it don't work. 使用2个滑块可以正常工作,但是当我尝试使用3个带有2个引用的滑块时它不起作用。
constructor(props) {
super(props);
this.state = {
nav1: null,
nav2: null,
nav3: null,
};
}
componentDidMount() {
this.setState({
nav1: this.slider1,
nav2: this.slider2,
nav3: this.slider3,
});
}
<Slider
className="background-slider"
asNavFor={this.state.nav2, this.state.nav3}
ref={slider => (this.slider1 = slider)}
{...settings1}> ...
</Slider>
<Slider
className="content-slider"
asNavFor={this.state.nav1, this.state.nav3}
ref={slider => (this.slider2 = slider)}
{...settings2}> ...
</Slider>
<Slider
className="person-slider"
asNavFor={this.state.nav2, this.state.nav1}
ref={slider => (this.slider3 = slider)}
{...settings3}> ...
</Slider>
Thanks 谢谢
The "asNavFor" prop expects a single value, not a list of values, so putting multiple refs there will not work. “ asNavFor”道具需要单个值,而不是值列表,因此将多个引用放在那儿将不起作用。
What appears to work is if you instead have each slider point to the next slider, and then have the last one point back to the first, as such: 看来可行的是,如果您让每个滑块指向下一个滑块,然后使最后一个点回到第一个滑块,如下所示:
constructor(props) {
super(props);
this.state = {
nav1: null,
nav2: null,
nav3: null,
};
}
componentDidMount() {
this.setState({
nav1: this.slider1,
nav2: this.slider2,
nav3: this.slider3,
});
}
<Slider
className="background-slider"
asNavFor={this.state.nav2}
ref={slider => (this.slider1 = slider)}
{...settings1}> ...
</Slider>
<Slider
className="content-slider"
asNavFor={this.state.nav3}
ref={slider => (this.slider2 = slider)}
{...settings2}> ...
</Slider>
<Slider
className="person-slider"
asNavFor={this.state.nav1}
ref={slider => (this.slider3 = slider)}
{...settings3}> ...
</Slider>
As a side note: I have no idea whether this is officially supported behavior or just a happy coincidence, so use with caution. 附带说明:我不知道这是官方支持的行为还是偶然的巧合,因此请谨慎使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.