slick.jsをモーダルなど、最初非表示のもので使うとき

slick.js
http://kenwheeler.github.io/slick/

こちらのスライダーのプラグインを、モーダル内で使おうとしたとき、表示崩れが起きた。
調べてみたら、display: none;のため、widthが0pxになっていた。

再設定できるeventが用意されていたので、それを試してみても、うまくいかず・・・

    $(function(){
        var slider = $('.slider').slick();
        $('.open-modal').click(function(){
            slider.slick('setPosition');
        });
    });

丸2日頭を悩ませてしまったが、とてもシンプルな理由だった。

私はてっきり、slider.slick('setPosition');が動いていないと思ってしまった。
原因は、モーダルが300ミリ秒かけて表示していたこと。
なので、300ミリ秒後に再設定すれば良い。
300ミリ秒間、表示崩れした状態が見えてしまうので、opacityでごまかした。

    $(function(){
        var slider = $('.slider').slick();
        $('.open-modal').click(function(){
            slider.css('opacity',0);
            slider.animate({'z-index':1},300,function(){
                slider.slick('setPosition');
                slider.animate({'opacity':1});
            });
        });
    });

違和感出るかなーと思ったが、意外と言われてもわからない程度だったので良かった。