I’ve encountered the issue of flashing, uninitialised slider items, where the items show in their pre-slider state until the js has loaded and initialised the block of HTML. And every time I use Ken’s slick carousel I have to apply the same CSS to prevent the flashing. So here it is:
.slider:not(.slick-initialized) .slide:not(:first-of-type) {display: none}
This little one-line does exactly what it says on the tin - it sets all but the first .slide to display: none until the .slick-initialised class is applied to the .slider (parent) block.
Aside: I also set the height of the .slider to the height of itself, as follows (whch ensures that the slides will be the same height once the slider is initialised):
const slider = $('.slider');
slider.css('height', slider.height() + 'px');
I thought I’d post these here for anyone else that encounters these little niggles.