この簡単モーダルウィンドウのcss、JS、htmlコードをありがたくコピペさせていただき、
slickスライダーのコードを組み合わせる
https://myscreate.com/pure-modal/
jQuery(function () {
$('#openModal').click(function(){
$('#modalArea').fadeIn();
$('.slick-slider').slick('setPosition');
});
$('#closeModal , #modalBg').click(function(){
$('#modalArea').fadeOut();
});
jQuery(".single_sample").slick({
dots: true,
});
});
WP内前提
検索してみるとモーダルやタブ切り替えの中にsliderをいれて表示させるのは
普通じゃできないみたい。.slick('setPosition');が必要になるみたい
調べても「こうしたらできましたー」のテキストばかりでコードが無い…
その動くコードが私には必要なんだ…構築できない…
はじめはwpプラグインのEASY Fancy boxのモーダルのインラインを使用して、検索して出てくる $('.slick-slider').slick('setPosition');
をやってみたがwidthもheightも0pxでまったくモーダル内が表示されない
動くコードがうまく見つけられないので私のコードであってるのかどうかもわからない
WPプラグインだからダメなのかもしれないと思って、モーダルの簡単コードを探す。プラグイン化されてないやつ。
そのcodepenのコードをコピペして、
・slickを動かすコード
・$('.slick-slider').slick('setPosition');をButtonをclickしたあと～のコード内にいれる
するとちゃんとできた！うおおおおおおおおおおおおおお
$('.slick-slider').slick('setPosition'); をいれてなくてもモーダル内に表示されたが
２～３秒後に画像が表示される。１回開いたモーダルは何回開閉しても大丈夫だが、
初めてクリックするモーダルだと、ｽﾗｲﾀﾞｰ画像が表示されるのに数秒かかった。
その数秒をどうにかするというページもみつけたが、そのまえに
$('.slick-slider').slick('setPosition'); を有効にしてないことに気づき、コードをいれてみたところ、slider画像の不自然な表示遅れもなく、ちゃんとクリック→モーダル開いてsliderも表示され
→レスポンシブもok！になった
はーーーーWPプラグインは色々組み合わせる必要があるときやばいんだよね
躓くことが多い。色々対応させるためにいろんなコードが入ってて、それで動かないとか
そんなかんじなんだろう。
はーーーーー動いてよかった
というかなんでslick slider を使用なのかというと、検索したらslickしか出てこないから
他のsliderの話がでてこない…setPosiitionのとやらの設定が他のsliderには無いのだろうか
