Slick.jsの親に「display: none;」かけるとうまく表示されない件（解決策）

jQueryプラグイン「slick」でスライダーにしたulの親要素を"display: none;"などで非表示にしたまま".slick"でスライドを設定すると表示されない（崩れる）。

表示されていないので、
横幅が正常に取得されない→0になる
ということだと思う。

slickには"setPosition"なるものが装備されているのでそれを、切り替え時などに合わせて発火させる。

$(function() {
   var slider = $('.example'); //最初に指定していたほうが余計なオブジェクトを作らないので軽くなる
   slider.slick({
       arrows:false,
       dots:true,
       infinite: false,
   });
   $('.example_fire').click(function () { //タブなど切り替えの要素を指定
       slider.slick('setPosition'); //今回のキモ「setPosition」
   });
});

めでたしめでたし。

追記：
CSSのタブ内などにある場合は少しハックが必要。
→ CSSのinputで書いたタブ切り替え内のslickスライダーが表示されないとき