［jQuery］スライダー画像が一瞬縦に全部表示されてしまう（Slick）

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