slick.js, display:noneでハマったこと

slick.jsで、スライダー部分をdisplay:noneにするとレイアウトが乱れてハマったのでメモ。
今回、私がハマった状況は、
- 4つのタブがあり、それぞれにスライダーを配置する。
- そのタブのコンテンツ領域（tab-panes）はページが読み込まれた際には、見えない状態（タブだけひょっこり見えてる状態）にしておいて、４つのうちどれかタブをクリックするとタブのコンテンツ領域（tab-panes）がslideUpする
というものでした。コードで表現すると以下のような感じ。

<div class="tab-area">
  <div class="tabs">
    <div class="tab"> タブ１ </div>
    <div class="tab"> タブ2 </div>
    <div class="tab"> タブ3 </div>
    <div class="tab"> タブ4 </div>
  </div>
  <div class="tab-panes">
    <div class="tab-pane"> タブ１のコンテンツ(スライダー) </div>
    <div class="tab-pane"> タブ2のコンテンツ(スライダー) </div>
    <div class="tab-pane"> タブ3のコンテンツ(スライダー) </div>
    <div class="tab-pane"> タブ4のコンテンツ(スライダー) </div>
  </div>
</div>

そして、cssで.tab-panes { display:none }にしてjqueryをごにょごにょ書いて、よし挙動確認だ！ってかんじで試してみると...スライダーがない...widthが０になっている。
googleセンセー...

でてきました！さすがセンセー

Basically slick can calc the dimensions if the slides aren't taking up space in the dom. Use visibility: hidden w/ position: absolute to take it out of the document flow, instead of display: none or use the slick reset/setPosition method in your JS when the click event reveals it.

引用元：Slider set to display:none then set to show() ... first slide does not show??

display:noneなどでスペースを確保していない状態でスライダーが読み込まれると、計算できないよ。ってことみたいですね
setPositionは使いこなせず、タブかnext/prevボタンを２、3回クリックするとスライダーが表示される仕様に。
visibility: hidden、この線で試してみるといい感じに表示されました！

同じようにハマっていらっしゃる方のお助けになればと思い、書きました。
setPositionはこう使うんだぜ、こういうやり方の方がいけてるぜってのがありましたら、教えてください。