【メモ】Bootstrapのモーダルウィンドウとslick.jsを組み合わせた時、レイアウトが崩れるのを防ぐ

はじめに

Riot.jsで定義されたある独自タグの中で、Bootstrapのモーダルウィンドウを呼び出し、その中でslick.jsを利用したイメージカルーセルを実装したのですが、そのままの状態だとwidthの値の取得が上手くいかないのか、1ページ目のレイアウトが崩れてしまったため、それに対処したというお話です。

経緯

実装に当たってRiot.js + Bootstrap + slick.jsと複数のライブラリに跨った部分だったので、問題の切り分けに少し手間取りましたが、どうやらBootstrapのモーダルウィンドウとslick.jsの相性が良くないということが分かりました。
slick.js以外にも、siemaなどの他のイメージカルーセルに使われるライブラリとモーダルウィンドウを組み合わせてみても同じような現象が発生したので、こういったライブラリはページを開いた段階では非表示になっている要素と組み合わせるのは基本的に良くないのかもしれないです。

解決

ライブラリとしてはメジャーなものなので、同じような問題に遭遇した人がいるはず、と思い調べてみると、無事ヒットしました（参考リンク参照）。
殆どリンク先そのままの文章になってしまいますが、slick.jsにはsetPositionというwidthを再設定出来るイベントがあるので、モーダルウィンドウを表示してからそのイベントを実行し、切り替わりの不自然さを軽減するためにアニメーションを加えれば良いという訳ですね。

ほぼそのまんまですが、リンク先のコードを有り難く参考にさせていただきながらこんな感じに実装して解決しました（実際にはRiot.jsのオブザーバブルと組み合わせてコードを記述しているので多少複雑になっており、簡略化のために要点だけ抜き出しているのでご注意を）。
また、自分の環境ではAPIとの通信が絡んだりなんだりで、少し処理に時間がかかるようだったので、アニメーションの時間は少し長めにとってあります。

$('#example').modal('show');
var slider = $('.slider');

slider.css('opacity',0);
slider.animate({'z-index':1},500,function(){
  slider.slick('setPosition');
  slider.animate({'opacity':1});
});

参考リンク

https://qiita.com/mimoe/items/c4f4754815525b08041e