React-slick: asNavFor only 1st and 3rd item are synced

[alalfakawma]

Hello, guys, I am not able to sync two of my sliders, here are the code for the slider, the slider only syncs the 1st and the 3rd which is really weird.

state = {
    nav1: null,
    nav2: null
  }

  componentDidMount() {
    this.setState({
      nav1: this.slider1,
      nav2: this.slider2
    });
  }

<div className="widget-content testimonial-wrap">
                  <div className="row">
                      <div className="col-md-push-3 col-sm-push-2 col-sm-push-2 col-xs-push-2 col-md-6 col-sm-8 col-xs-8">
                          <Slider asNavFor={ this.state.nav2 } ref={ slider => (this.slider1 = slider) } arrows={false} slidesToShow={4}>
                              { this.props.data.testimonials.map(testimonial => {
                                return (
                                  <article key={ testimonial.name } className="entry-item">
                                      <div className="entry-thumb">
                                          <img src={ testimonial.img } alt="" />
                                      </div>
                                  </article>
                                )
                              }) }
                          </Slider>
                      </div>
                  </div>
                  <Slider asNavFor={ this.state.nav1 } ref={ slider => (this.slider2 = slider) } slidesToShow={1} arrows={false} swipeToSlide={true}>
                    { this.props.data.testimonials.map(testimonial => {
                      return (
                        <article key={ testimonial.name } className="entry-item">
                            <div className="entry-content">
                                <p dangerouslySetInnerHTML={{ __html: testimonial.content }}></p>
                                <h6>
                                  <a href="Customer website">
                                    { testimonial.name }
                                  </a>
                                </h6>
                                <span>
                                  <span style={{ display: "inline" }} dangerouslySetInnerHTML={{ __html: testimonial.position }}></span> - <i>{ testimonial.company }</i>
                                  </span>
                                <i className="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                        </article>
                      )
                    }) }
                  </Slider>
              </div>

[pederklev]

I'm having a similar problem. I'm trying to set up a slideshow with a main slider showing large images, and a secondary one showing thumbnails.

In my case, only every second navigation in either of the sliders would update the other.

I think I've solved my case without asNavFor, but rather using beforeChange for each of the sliders to slickGoTo in the other one.

<Slider
          ref={this.nav1}
          beforeChange={(oldIndex, newIndex) => {
            this.nav2.current && this.nav2.current.slickGoTo(newIndex);
          }}
>
...
</Slider>



<Slider
          ref={this.nav2}
          slidesToShow={3}
          focusOnSelect={true}
          beforeChange={(oldIndex, newIndex) => {
            this.nav1.current && this.nav1.current.slickGoTo(newIndex);
          }}
          centerMode
>
...
</Slider>

[alalfakawma]

Fix for this is to use the older version, just do an npm install [email protected]. Idk why the newer version does not work. But this did fix my issue.

[fionchen0608]

I had the same problem
i install npm install [email protected]
but didn't fix the problem
Can you guide me, How to fix this error successfully?
thank you a lot

[cMack87]

Same issue here - copied the asNavFor example exactly, but they would only sync every other click.

Rolling back to 0.23.1 worked for me