2

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

Gunasekar
  • 611
  • 1
  • 8
  • 21
yvl
  • 21
  • 1
  • 4

1 Answers1

1

The "asNavFor" prop expects a single value, not a list of values, so putting multiple refs there will not work.

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.

Haltesh
  • 36
  • 3
  • It works, but it works poorly. When you quickly click on the arrows of the slider, the sliders are intermingled with each other - the order is lost and as a result they do not show what they need. – yvl Oct 11 '18 at 11:41