React-slick: First slide delay when fade set to true

[jfeferman]

When the fade setting is true, the current slide is only set after the time defined in autoplaySpeed.

Here is my configuration:

    var settings = {
      dots: false,
      lazyLoad: true,
      infinite: true,
      autoplay: true,
      fade: true,
      speed: 1000,
      autoplaySpeed: 4000,
      arrows: false,
    }

By inspecting the DOM, I can verify that no slider is set as slick-current until the time elapsed in the configuration. Since all sliders have opacity:0 and no current is selected, the slider does not show any images when loaded.

As a quick hack to prevent an empty slider, I force the opacity of the first slide.

  .slick-track {
    .slick-slide:first-child {
      opacity: 1 !important;
    }
  }

This is less than ideal since on load, the first slide displays for twice the time as other slides.

Thanks.

[jfeferman]

Calling playNext() on the slider resolves the issue.

[matiaslgh]

Same issue. It seems that only happens with infinite: true + fade: true.
I'm also using it in one of two sliders connected with asNavFor, but I could not reproduce the issue with this code: https://react-slick.neostack.com/docs/example/as-nav-for/ (adding fade to one of them) 🤔
Anyway, I applied the hack suggested by jfeferman to fix it and it works 👍

[shj95]

In my case, adding 1 empty slide into Slider solved the issue.

  renderSlide () {
    if (this.images.length === 0){
      return (
        <Slide key="0" />
      )
    }
    return this.images.map((url, index) =>
      (
        <Slide
          key={index}
          src={url}
        />
      )
    )
  }

It looks like async fetching data makes this happen.

[chaitanya-SharePoint]

In my case, adding 1 empty slide into Slider solved the issue.

  renderSlide () {
    if (this.images.length === 0){
      return (
        <Slide key="0" />
      )
    }
    return this.images.map((url, index) =>
      (
        <Slide
          key={index}
          src={url}
        />
      )
    )
  }

It looks like async fetching data makes this happen.

This worked....