Q&A
実現したいこと
- [1] モーダル内にスライダーを設置する（jquery、swiperを使用）
- [2] ページ上のボタンをクリックするとモーダルを表示＆該当スライドまで移動
- [3] 上記を複数設置する
該当のソースコード
html
1<div class="content"> 2 <a class="js-modal-open" href="" data-target="modal01">クリックでカード1を表示</a><br> 3 <a class="js-modal-open" href="" data-target="modal01">クリックでカード2を表示</a><br> 4 <a class="js-modal-open" href="" data-target="modal01">クリックでカード3を表示</a><br> 5 <br> 6 <a class="js-modal-open" href="" data-target="modal02">クリックでカード４を表示</a><br> 7 <a class="js-modal-open" href="" data-target="modal02">クリックでカード５を表示</a><br> 8 <a class="js-modal-open" href="" data-target="modal02">クリックでカード6を表示</a> 9 </div> 10 <div id="modal01" class="modal js-modal"> 11 <div class="modal__bg js-modal-close"></div> 12 <div class="modal__content"> 13 <p>1つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。</p> 14 <!-- Swiper --> 15 <div class="swiper-container1 Modal-Inner-Card"> 16 <div class="swiper-wrapper Modal-Inner-Card-Wrapper"> 17 <!-- item --> 18 <div class="swiper-slide Modal-Inner-Card-Wrapper-Slide"> 19 <div class="Modal-Inner-Card-Wrapper-Slide-Item"> 20 <div class="Modal-Inner-Card-Wrapper-Slide-Item-Box"> 21 <p class="Modal-Inner-Card-Wrapper-Slide-Item-Box-Text">カード１の内容</p> 22 </div> 23 </div> 24 </div> 25 <!-- item --> 26 <div class="swiper-slide Modal-Inner-Card-Wrapper-Slide"> 27 <div class="Modal-Inner-Card-Wrapper-Slide-Item"> 28 <div class="Modal-Inner-Card-Wrapper-Slide-Item-Box"> 29 <p class="Modal-Inner-Card-Wrapper-Slide-Item-Box-Text">カード２の内容</p> 30 </div> 31 </div> 32 </div> 33 <!-- item --> 34 <div class="swiper-slide Modal-Inner-Card-Wrapper-Slide"> 35 <div class="Modal-Inner-Card-Wrapper-Slide-Item"> 36 <div class="Modal-Inner-Card-Wrapper-Slide-Item-Box"> 37 <p class="Modal-Inner-Card-Wrapper-Slide-Item-Box-Text">カード３の内容</p> 38 </div> 39 </div> 40 </div> 41 </div> 42 </div> 43 <div class="swiper-button-prev"></div> 44 <div class="swiper-button-next"></div> 45 <a class="js-modal-close" href="">閉じる</a> 46 </div><!--modal__inner--> 47 </div><!--modal--> 48 49 <div id="modal02" class="modal js-modal"> 50 <div class="modal__bg js-modal-close"></div> 51 <div class="modal__content"> 52 <p>2つ目モーダルウィンドウです。</p> 53 <!-- Swiper --> 54 <div class="swiper-container2 Modal-Inner-Card"> 55 <div class="swiper-wrapper Modal-Inner-Card-Wrapper"> 56 <!-- item --> 57 <div class="swiper-slide Modal-Inner-Card-Wrapper-Slide"> 58 <div class="Modal-Inner-Card-Wrapper-Slide-Item"> 59 <div class="Modal-Inner-Card-Wrapper-Slide-Item-Box"> 60 <p class="Modal-Inner-Card-Wrapper-Slide-Item-Box-Text">カード４の内容</p> 61 </div> 62 </div> 63 </div> 64 <!-- item --> 65 <div class="swiper-slide Modal-Inner-Card-Wrapper-Slide"> 66 <div class="Modal-Inner-Card-Wrapper-Slide-Item"> 67 <div class="Modal-Inner-Card-Wrapper-Slide-Item-Box"> 68 <p class="Modal-Inner-Card-Wrapper-Slide-Item-Box-Text">カード５の内容</p> 69 </div> 70 </div> 71 </div> 72 <!-- item --> 73 <div class="swiper-slide Modal-Inner-Card-Wrapper-Slide"> 74 <div class="Modal-Inner-Card-Wrapper-Slide-Item"> 75 <div class="Modal-Inner-Card-Wrapper-Slide-Item-Box"> 76 <p class="Modal-Inner-Card-Wrapper-Slide-Item-Box-Text">カード６の内容</p> 77 </div> 78 </div> 79 </div> 80 </div> 81 </div> 82 <div class="swiper-button-prev"></div> 83 <div class="swiper-button-next"></div> 84 <a class="js-modal-close" href="">閉じる</a> 85 </div><!--modal__inner--> 86 </div><!--modal-->
css
1.content{ 2 margin: 0 auto; 3 padding: 40px; 4} 5.modal{ 6 display: none; 7 height: 100vh; 8 position: fixed; 9 top: 0; 10 width: 100%; 11} 12.modal__bg{ 13 background: rgba(0,0,0,0.8); 14 height: 100vh; 15 position: absolute; 16 width: 100%; 17} 18.modal__content{ 19 background: #fff; 20 left: 50%; 21 padding: 40px; 22 position: absolute; 23 top: 50%; 24 transform: translate(-50%,-50%); 25 width: 60%; 26} 27.Modal-Inner-Card { 28 width: 100%; 29} 30.Modal-Inner-Card-Wrapper { 31 display: flex; 32} 33.Modal-Inner-Card-Wrapper-Slide { 34 width: 100% !important; 35 height: auto; 36} 37.Modal-Inner-Card-Wrapper-Slide-Item { 38 padding-top: 50px; 39 padding-bottom: 50px; 40 width: 90%; 41 height: 100%; 42 background: #059bcc; 43} 44.Modal-Inner-Card-Wrapper-Slide-Item-Box { 45 position: relative; 46 margin-left: auto; 47 margin-right: auto; 48 width: 78.37%; 49} 50.Modal-Inner-Card-Wrapper-Slide-Item-Box-Text { 51 color: #fff; 52} 53
js
1$(function(){ 2 3var swiper = new Swiper('.swiper-container1', { 4 loop: true, 5 slidesPerView: 'auto', 6 centeredSlides: true, 7 navigation: { 8 nextEl: '.swiper-button-next', 9 prevEl: '.swiper-button-prev', 10 } 11 }); 12 13var swiper = new Swiper('.swiper-container2', { 14 loop: true, 15 slidesPerView: 'auto', 16 centeredSlides: true, 17 navigation: { 18 nextEl: '.swiper-button-next', 19 prevEl: '.swiper-button-prev', 20 } 21 }); 22 23 $('.js-modal-open').each(function(){ 24 $(this).on('click',function(){ 25 var target = $(this).data('target'); 26 var modal = document.getElementById(target); 27 $(modal).fadeIn(); 28 return false; 29 }); 30 }); 31 $('.js-modal-close').on('click',function(){ 32 $('.js-modal').fadeOut(); 33 return false; 34 }); 35});
試したこと
一つならば下記を参考に実現出来たのですが、複数設置する場合、swiper.slideToをどのように使えばいいのかわかりませんでした。
そもそもjqueryとswiperで実装は可能でしょうか？
参考
https://codepen.io/yuyaphotograph/pen/gOwLyBe
ご回答頂けると嬉しいです。よろしくお願いします。
回答1件
0
ベストアンサー
参考にされているcodepenの中身を書き換えたらちゃんと複数モーダル出せたので
jquery＆swiperでも問題ないみたいですね。
（提示されいているソースコードは参考元からそこそこ書き換えられているようですので、何が違うのか・どこが問題なのかまでは把握していません）
少なくともjsの var swiper = ... の、同じ名前の変数宣言は解消した方がよいでしょう。
また、new Swiper箇所はコピペで複製し2か所で宣言しているのに対して、modal-openをコピペせず共通化を試みているのが気になります。
最初は全てをコピペで増やしてそれぞれ別のclassやidを新規で付与して、「カード１～３の場合はmodal01を開いてswiper1.slideToを呼ぶ」
…のように完全に分けてしまえばslideToをどうやって呼ぶのか？と迷うことも無いと思います。
完成してないのにいきなり共通化するのは、いわゆる「早すぎる共通化」以前の問題です。
共通化は最低限2つがちゃんと動くようになってからで、3つ目を増やそうとした時や他ページに展開したくなったタイミング等に考えるのでも遅くはないです。
投稿2023/09/04 16:28
総合スコア760
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/09/06 11:08