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

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

CSSに３〜４行追記で解決

.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
（参考というかほぼパクりですすみません！）