React-Slick:如何同步3个滑块

时间:2018-10-09 09:15:09

标签: reactjs synchronization react-slick

我正在使用带有3个滑块的react-slick滑块同步。使用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>

谢谢

1 个答案:

答案 0 :(得分:0)

“ asNavFor”道具期望的是单个值,而不是值列表,因此在其中放置多个引用将不起作用。

看起来有效的是,如果您让每个滑块指向下一个滑块,然后使最后一个指针回到第一个滑块,例如:

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>

作为旁注:我不知道这是官方支持的行为,还是幸福的巧合,所以请谨慎使用。