slick.js使用時に親要素を表示非表示に切り替えたときスライダーが表示されない問題の解決法

予めdisplay:none;を設定してある親要素の中にある子要素に実装したslickがうまく表示されませんでした。親要素をdisplay:block;に変更してもスライダーが表示されない。

どうしたもんかなと、いろいろ調べてみたところ、親要素の表示非表示を切り替えたタイミングで、

$('.slider').slick('setPosition');

と、このように「setPosition」メソッドを実行することで、ちゃんとスライダーを表示させることができました。

この「setPosition」メソッドですが、slickの公式サイトにはこんな風に書いてありました。

Fires after position/size changes

位置やサイズを変更したときに発火させるメソッドのようですね。
恐らく親ボックス要素が非表示の時は、スライダーの大きさがゼロになっているのではないでしょうか。そのため親要素の表示非表示を切り替える時にサイズの再調整が必要になるのではないかと・・・

ともかく、親要素の表示非表示の切り替えのタミングでこの「setPosition」メソッドを実行することで問題は解決しました。