display:noneでslickのレイアウトが崩れる時の対処法

久しぶりの投稿です。
最近スライダー系のプラグインとしてslickを使っていました。

slick自体は使いやすいのですが、load画面の実装と合わせて使用すると、下のようになってしまうことがありました。

原因はload画面の実装のためにdisplay:noneを効かせていたため、読み込みタイミングでの幅(width)が0と認識され、画像が表示されないという問題です。

上記の解決策としてはタブなどのクリックでは発火イベントを使ってsetPositionを使うそうですが、画面遷移時の対処がわからず困っていました。

解決方法としてはcss自体を修正する方法がありました。

load画面の実装ではcontainerにhiddenクラスを付与しており、読み込みが完了した時点で消すという流れになっていると思います。
その時に

.hidden{
 display:none
 }

としているのが問題なので、

.hidden{
  height: 0px; 
  overflow-y: hidden;
}

このように修正してあげます。
要は高さだけを０にして隠すことで、幅のプロパティは残しているということですね。

逆転の発想というか、load画面の実装ではむやみにdisplay:noneを使わないほうが無難？なのかもしれません。

備忘録として共有させていただきました。