CODEWITHSUNDEEP
reactjssynchronizationreact-slick
yvl
yvl

Reputation: 21

React-slick: how sync 3 sliders

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

Upvotes: 2

Views: 2996

Answers (1)

Haltesh
Haltesh

Reputation: 36

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.

Upvotes: 1

Related Questions