忍者ブログ
29 March

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

02 May

モーダルウィンドウの中にスライドショーをいれたい slick

この簡単モーダルウィンドウの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'); をいれてなくてもモーダル内に表示されたが
2~3秒後に画像が表示される。1回開いたモーダルは何回開閉しても大丈夫だが、
初めてクリックするモーダルだと、スライダー画像が表示されるのに数秒かかった。
その数秒をどうにかするというページもみつけたが、そのまえに
$('.slick-slider').slick('setPosition'); を有効にしてないことに気づき、コードをいれてみたところ、slider画像の不自然な表示遅れもなく、ちゃんとクリック→モーダル開いてsliderも表示され
→レスポンシブもok!になった

はーーーーWPプラグインは色々組み合わせる必要があるときやばいんだよね
躓くことが多い。色々対応させるためにいろんなコードが入ってて、それで動かないとか
そんなかんじなんだろう。
はーーーーー動いてよかった

というかなんでslick slider を使用なのかというと、検索したらslickしか出てこないから
他のsliderの話がでてこない…setPosiitionのとやらの設定が他のsliderには無いのだろうか








PR