React-slick: Issue with stacking slides before react-slick is initialized…

[chemoish]

https://github.com/akiran/react-slick/blob/master/src/inner-slider.jsx#L80

slick-initialized is hard coded and not set by any events.

How can you prevent stacking slides? Thoughts?

_In kenwheeler/slick, slick-initialized is an event… so you can prevent FOUC._

[akiran]

Render slick slider only when you need.
slick-initialized won't be necessary in react

[chemoish]

I need it immediately? or am I missing something?

I solved this the FOUC issue by…

componentDidUpdate() {
    this._slider_container.classList.add('initialized');
}

render() {
    return (
        <div className="slider-container" ref={c => (this._slider_container = c)}>...</div>
    );
}

// styles

.slider-container
{
    display: none;

    &.initialized
    {
        display: block;
    }
}

[akiran]

You don't need to do that. check this demo

https://jsfiddle.net/kirana/20bumb4g/

On Fri, Mar 4, 2016 at 10:54 AM, Carey Hinoki [email protected]
wrote:

I need it immediately? or am I missing something?

I solved this the FOUC issue by…

componentDidUpdate() { this._slider_container.classList.add('initialized');
}
render() { return (

);
}

// styles
.slider-container
{
display: none;

.initialized &
{
    display: block;
}

}

—
Reply to this email directly or view it on GitHub
https://github.com/akiran/react-slick/issues/254#issuecomment-192110244.

[chemoish]

I am thinking that it has to do with server side rendering. Since the DOM and images are already delivered.

[akiran]

I am not sure if slider can support server-side rendering well.
It does some math to compute dimensions of slides and slide-track based on container width, which is known only after rendering on browser

I will try to add slick-initialized class after mounting on client

[Randy808]

Not sure if this is related, but why is the first slide stacked in this example and is there a way to resolve it? :
https://jsfiddle.net/vddg2baj/2/

[anshuPurohit]

@chemoish I solve FOUC by using this technique:
1) on server side pass infinite: false and pass only 1 item to slick component
2) on client side pass infinite: true and pass all the items to slick component

This way slick HTML received in the browser will have only 1 item to show and when slick component is initialized on the client side it will render all the items.

[dcurletti]

@anshuPurohit although your solution does improve the user experience, two things still occur:
the rest of the images pop into view
if your slider is center to "centerMode" there will be an even larger user disturbance as the image moves to the center and the other images are rendered.

[laveesingh]

The issue has been fixed in previous releases. Please feel free to request reopen if disagree.

[fraserisland]

This was still occurring for me, i couldn't get the slick-initialized class to work with any transitions... I ended up having to just apply my own styles, i set a max-height to the height it should be, with overflow: hidden on the slider holder. Then on my slider class, i simply applied display: flex. Hope this helps.