Purpose

During loading of the Slick slider, all slide images can appear on the page for around a second which is annoying.

Slick adds the class ‘slick-initialized’ after the slider has loaded successfully. This class can be used to solve the said problem as shown in the example below.

Slider HTML (simplified)

<div id='cu-listing-slider'>
    <div class='cu-slide-item'><img></div>
    <div class='cu-slide-item'><img></div>
    <div class='cu-slide-item'><img></div>
    <div class='cu-slide-item'><img></div>
</div>

Slider CSS

The approach is to display the first slide at all states and hide the other slides when the class ‘slick-initialized’ is absence.

The property ‘visibility’ instead of ‘display’ is used in order to maintain the size of the images during initialization.

#cu-listing-slider .cu-slide-item:first-of-type {
	visibility: visible;
}

#cu-listing-slider:not(.slick-initialized) .cu-slide-item:not(:first-of-type) {
	visibility: hidden;
}