React-slick: Rendering Slider after list of children components are rendered

[akhayoon]

I have an issue where the Slider is rendering before all its children components are rendering and on initial load, the Slider only has the width of one slide (and the children are listed vertically instead of horizontally). Resizing the window usually fixes the issue, but doesn't address the underlying problem I have.

What is the best way to handle this issue (i.e waiting for the children components to all render first and then Slider rendering based on that maybe?)

[sankara]

With the caveat that I haven't seen your code - I faced a similar issue. Wrapping each child component in a <div> (and setting the key correctly) fixed the issue for me. In my case it was because the necessary classes like slick-slide were not being set on the child components.

[akhayoon]

Thanks for the answer @sankara
I've already done what you've listed above. I realize it must be a browser issue of some kind.
I noticed the issue on the demo playground itself https://jsfiddle.net/kirana/20bumb4g/

It's not the exact same issue, but the images will not load about 80% of the time until I resize the window. It's just on initial load, you don't see any images. Similarly on my issue, resizing the window fixes the issue. I'm using Version 48.0.2564.116 (64-bit) of Chrome on OSX.

[akhayoon]

one part of the problem seems to be that .slick-track class is that width 0px and then adjusts to the right size after resize is triggered.

[akhayoon]

@akiran This issue seems to be only happening in Chrome. Can you confirm this? In the demo https://jsfiddle.net/kirana/20bumb4g/ the image should not load most of the time until you resize.

[Morganjackson]

Did you find a fix for this? same thing happens to my component and the demos/playground.

[JBrownie77]

Same issue in Safari. It renders about 1px height until I resize the browser. Then it full loads

[Streemo]

I am also getting the height rendering to 1px for slides. It seems slightly unpredictable. Only after a resize, or a change in css, does the height revert to original. All images have the same height. Is there a fix for this? I've set lazyLoad to false.

[damshaw]

Same for me... I have some tabs and sick-track in the closed tabs has a width 0px and it stays at 0px when opened. slick-track only calculates the correct width when the widow is resized....

Any fix for this?

[Ganasist]

I've got the same problem. Seems to happen in Chrome but not Safari. The app uses universal render so I tried to force render only on client by setting a boolean state value in ComponentDidMount, but that didn't work.

Anyone figure this out?

[RyoIkarashi]

I added custom css and it did the trick for me.

_Slider Settings_

const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      fade: true,
      arrows: false,
      slidesToShow: 1,
      slidesToScroll: 1,
      adaptiveHeight: true
    };

_Custom CSS_

.slick-list {
    height: auto !important;
}
.slick-slide {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px;
    &.slick-active {
      left: 0 !important;
      border: none !important;
      margin: 0 auto !important;
      height: initial !important;
      clip: initial !important;
      overflow: visible !important;
      padding: inherit !important;
      position: inherit !important;
    }
  }

What the code above does is that it hides each slide visually except for active one.
Hope this helps.

[kimown]

@RyoIkarashi thanks man, you save my life

[omritoptix]

A quick hack which worked for me was wait for the next tick and dispatch a resize event:

componentDidMount() { setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0); }

[laveesingh]

We are now using resize-observer-polyfill to update track on the list resize. That should solve the problem. These changes are currently in dev branch, and will be merged to master soon.

[laveesingh]

The problem has been fixed. Please make sure you're using the latest version of react-slick.

[nebulousecho]

I have solved similar issues by wrapping the code to be loaded in {[data variable] && [code]} to prevent it from loading before data is available. 9 out of 10 times this has solved my issues.