slickスライダーを設置して完璧!と思いきやページ読み込み時に一瞬全部の画像がでちゃって困っていないですか?
それ、簡単に解決可能です。

いくつか方法はありますが、最も簡単(と思う)やり方をご紹介します。

CSSに3〜4行追記で解決

.slider {
	display: none;
}
.slider.slick-initialized {
	display: block;
}

これでOKです。
(クラス「slider」は実際使用しているクラス名に変更する必要があります)

slickスライダーは、jsによりスライダー設定が完了した時点で新たに追加されるクラスがあります。
それが「slick-initialized」です。

この「slick-initialized」の有無によってcssにて表示を切り替えれば、スライダー設定完了以前に画像が表示されることがありません。
つまり、画像が縦並びに表示されることがなくなります。

上記を踏まえ、cssの記述を変えればフェードイン表示なども可能です。

.slider {
	opacity: 0;
	transition: opacity .25s ease;
}
.slider.slick-initialized {
	opacity: 1;
}

参考:
https://www.granfairs.com/blog/staff/slick-solve-tandem
(参考というかほぼパクりですすみません!)