React-slick: asNavFor works for all items expect first one

[SCasarotto]

I am attempting to use the asNavFor prop.It works when I click on any of the cells besides the first one. However, when I click on the first item in the "nav slider" the first slider doesn't move.

Has anyone else had this issue?

Code (Removed Some for readability):

class Listings extends Component {
  state = {
    mainSlider: undefined,
    navSlider: undefined
  }
  componentDidMount() {
    this.setState({
      mainSlider: this.mainSlider,
      navSlider: this.navSlider
    })
  }
  render() {
    const { pageData } = this.props
    const styles = configurableStyles(pageData)
    const {
    listingsTitle,
        listings,
    } = pageData
    const mainSettings = {
      accessibility: true,
      autoplay: true,
      autoplaySpeed: 10000, //10s
      arrows: false,
      dots: false,
      infinite: listings && listings.length > 6,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      responsive: [{
        breakpoint: 650,
        settings: {
          infinite: listings && listings.length > 4,
        }
      }],
      className: 'no-dots',
      ref: (slider) => (this.mainSlider = slider),
      asNavFor: this.state.navSlider
    }
    const navSettings = {
      accessibility: true,
      autoplay: true,
      autoplaySpeed: 10000, //10s
      arrows: false,
      dots: true,
      infinite: listings && listings.length > 6,
      speed: 500,
      slidesToShow: 6,
      slidesToScroll: 1,
      focusOnSelect: true,
      responsive: [{
        breakpoint: 650,
        settings: {
          infinite: listings && listings.length > 4,
          slidesToShow: 4,
        }
      }],
      //className       : 'slick-left-align',
      ref: (slider) => (this.navSlider = slider),
      asNavFor: this.state.mainSlider,
    }

    return (
      <div style={styles.listingsSection} id='listingsSection'>
        <h2 style={styles.listingsTitle}>{listingsTitle}</h2>
        <div style={styles.listingsWrapper}>
          <Slider {...mainSettings}>
            {listings && listings.map((cell, cellIndex) => {
              const { price, address, bed, bath, thumbnail } = cell
              return (
                <div key={`cell_${cellIndex}`}>
                  {...}
                </div>
              )
            })}
          </Slider>
          <Slider {...navSettings}>
            {listings && listings.map((cell, cellIndex) => {
              const { address, thumbnail } = cell
              return (
                <div key={`nav_cell_${cellIndex}`}>
                  {...}
                </div>
              )
            })}
          </Slider>
        </div>
      </div>
    )
  }
}

[kskonecka]

I am experiencing the same problem. I can see that it works when loop is enabled ( because in that case the first slide is always the active slide), but its on the false loop that i would need it to work

[simkesd]

@SCasarotto @kskonecka Did you two have any luck with this issue?
Whatever i tried, I can't seem to get around it. Everything works well when i have more than slides and infinite scrolling is on.

[SCasarotto]

Last I tried it wasn't working. I believe for my implementation I just didn't use this feature.

[hgsaaz]

Hi, just render the slide with onClick and manually change the slide to 0 index with SlickGoTo. I came up with this its working fine

Note: If haven't added any condition for 0th index its working fine with onclick also.

Here my code:
onClick={()=>{
this.nav1.slickGoTo(0);
}}

[frontendjorge]

Just add in your CSS this

.container-hero-banners-inner .slick-slide:first-child { opacity: 1 !important; }

Change the wapper class container for your class of the principal slider. And set true in infinite settings for all sliders.