modalやtabの中でslick.jsを使ったスライダーを実装するときのデモページ
ex01: デフォルト。普通に配置したslickスライダー
普通に配置したので普通にスライド表示されています。
ex02: タブ2の中にslickスライドを配置
簡単にBootstrap4のタブで実装します。
タブ1の中にはただの画像を配置、タブ2の中にex01で配置したものと同じスライダーを配置しました。
タブ2をクリックして切り替えると、スライダーが表示されません。左右にあるprev、nextのボタンを押して前後のスライドに切り替えることでようやく表示されます。
ex03: モーダルウィンドウの中にslickスライドを配置
ここでは「Qiitaに投稿されていた「スマホで使えるシンプルなモーダルウィンドウ」のdemoページを作って検証してみた」の記事で使用したモーダルでで実装します。
開いたmodalの中にex01で配置したものと同じスライダーを配置しました。
開いた直後はスライド部分がきれいに非表示となっています。ex02と同じく左右にあるprev、nextのボタンを押して前後のスライドに切り替えることでようやく表示されます。
ex04: タブ2の中にslickスライド、修正対応版
タブ2を開いたときにふわっとスライドが表示されます。
仕事で実装する場合はCSSでタブ内の高さを確保しておくと丁寧でいいと思います。
ex05: モーダルウィンドウの中にslickスライド、修正対応版
モーダルを開いたときにふわっとスライドが表示されます。