I'm using react-slick slider syncing with 3 sliders. With 2 sliders it works fine but when I try with 3 sliders with 2 refs it don't work.
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