Posted at

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

More than 3 years have passed since last update.

slick.js

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

こちらのスライダーのプラグインを、モーダル内で使おうとしたとき、表示崩れが起きた。

調べてみたら、display: none;のため、width0pxになっていた。

再設定できる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});
});
});
});

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