React-Slick: как синхронизировать 3 ползунка

Question

Я использую ползунковый переключатель синхронизации с 3 ползунками.С 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>

Спасибо

Answer 1

Свойство "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>

В качестве примечания: я понятия не имею, является ли это официально поддерживаемым поведением или просто счастливым совпадением, поэтому используйте с осторожностью.