質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

5508閲覧

Swiperとモーダルウィンドゥの組み合わせでクリックしたボタンに応じて表示するスライダーを変更したい

kakeru99

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/05/23 03:37

やりたいこと

ボタン1を押すとモーダルウィンドウ上のAスライダーが表示
ボタン2を押すとモーダルウィンドウ上のBスライダーが表示
ボタン3を押すとモーダルウィンドウ上のCスライダーが表示

解決したいこと

モーダルウィンドゥ自体とSwiper自体は動作していてモーダルウィンドゥのスクリプトを切った状態だとボタンを押すと目的のスライダーに変わるが、モーダルウィンドゥを組み合わせるとslideToLoopが機能しない。

1日調べて悩みましたが解決しなかったので質問させていただきました。
宜しくおねがいします。

html

1 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css"> 2 3<p class="btn_a btn01">ボタン1</p> 4<p class="btn_b btn01">ボタン2</p> 5<p class="btn_c btn01">ボタン3</p> 6 7 <div id="modal-main"> 8 <div id="slider_sample01" class="slider_wrap"> 9 <div class="swiper-container"> 10 <div class="swiper-wrapper"> 11 <div class="swiper-slide"> 12 <img src="http://placehold.jp/1000x300.png" alt="Aスライダー"> 13 </div> 14 <div class="swiper-slide"> 15 <img src="http://placehold.jp/1000x500.png" alt="Bスライダー"> 16 </div> 17 <div class="swiper-slide"> 18 <img src="http://placehold.jp/1000x800.png" alt="Cスライダー"> 19 </div> 20 </div> 21 </div> 22 <div class="swiper-button-prev btn_left01"></div> 23 <div class="swiper-button-next btn_right01"></div> 24 </div> 25 <!-- /.slider_sample01 --> 26 </div> 27 28 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> 29 <script> 30 $(document).ready(function() { 31 // モーダルウィンドウ 32 //テキストリンクをクリックしたら 33 $(".btn01").click(function() { 34 //body内の最後に<div id="modal-bg"></div>を挿入 35 $("body").append('<div id="modal-bg"></div>'); 36 37 let slider_count = $('.swiper-slide').length; 38 var mySwiper = new Swiper('.swiper-container', { 39 loop: true, 40 speed: 500, 41 navigation: { 42 nextEl: '.swiper-button-next', 43 prevEl: '.swiper-button-prev', 44 } 45 }) 46 realIndex = this.realIndex; 47 slideClass = jQuery('.swiper-slide-' + realIndex); 48 49 var swiper01 = new Swiper('#slider_sample01 .swiper-container', { 50 navigation: { 51 prevEl: '.btn_left01', 52 nextEl: '.btn_right01', 53 }, 54 autoHeight: true, 55 roundLengths: true, 56 loop: true, 57 on: { 58 slideChange: function() { 59 let slider_num = this.realIndex; 60 if (slider_num === 0) { 61 $('.btn_left01').text('Cスライダー'); 62 $('.btn_right01').text('Bスライダー'); 63 } else if (slider_num === 1) { 64 $('.btn_left01').text('Aスライダー'); 65 $('.btn_right01').text('Cスライダー'); 66 } else if (slider_num === 2) { 67 $('.btn_left01').text('Bスライダー'); 68 $('.btn_right01').text('Aスライダー'); 69 } 70 } 71 } 72 }); 73 $('.btn_a').click(function() { 74 swiper01.slideToLoop(0); 75 }); 76 $('.btn_b').click(function() { 77 swiper01.slideToLoop(1); 78 }); 79 $('.btn_c').click(function() { 80 swiper01.slideToLoop(2); 81 }); 82 83 84 //画面中央を計算する関数を実行 85 modalResize(); 86 //モーダルウィンドウを表示 87 $("#modal-bg,#modal-main").fadeIn("slow"); 88 $("#modal-bg,#btn_close").click(function() { 89 $("#btn_close,#modal-bg,#modal-main").fadeOut("slow", function() { 90 $('#modal-bg').remove(); 91 }); 92 93 }); 94 95 $(window).resize(modalResize); 96 function modalResize() { 97 var w = $(window).width(); 98 var h = $(window).height(); 99 100 var cw = $("#modal-main").outerWidth(); 101 var ch = $("#modal-main").outerHeight(); 102 $("#modal-main").css({ 103 "left": ((w - cw) / 2) + "px", 104 "top": ((h - ch) / 8) + "px" 105 }); 106 } 107 108 }); 109 }); 110 </script>

css

1body { 2 background: #ffffff; 3 padding: 20px; 4 font-family: Helvetica; 5 position: relative; 6} 7 8 9/* モーダル コンテンツエリア */ 10#modal-main { 11 display: none; 12 margin: 0; 13 padding: 0; 14 position: absolute; 15 z-index: 2; 16} 17 18/* モーダル 背景エリア */ 19#modal-bg { 20 width: 100%; 21 height: 100%; 22 background-color: rgba(0, 0, 0, 0.5); 23 position: fixed; 24 top: 0; 25 left: 0; 26 z-index: 0; 27} 28 29 30 31.slider_wrap { 32 position: absolute; 33 width: 1140px; 34 margin: 0 auto; 35 left: 50%; 36 margin-left: -570px; 37 top: 0; 38 z-index: 100; 39} 40 41.btn01:hover { 42 cursor: pointer; 43} 44 45コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

いずれかの.btn01を、1度は押さないと、押された要素ごとに分岐させたいswiper01.slideToLoopを実行するclickイベントが付与されないので、初回の.btn01click時に、slideToLoopが動作することはないと思います。

2回目以降の.btn01clickがどうなるかはブラウザによって変わりそうな気もしますが、
全体的に「自分の意図した順序」で処理が行われているのかが分からないコードになっているような。。。

1つの要素の1つのイベントに、複数の処理を設定した場合、設定した順番で動作する保証はないはずなので、.btn01と、.btn_aで別々にclickイベントを設定をするのではなく、どちらかにまとめた方が「自分の書いた順番通り」に動くので安心できるかなとか。。。

それと、本題と少しずれてしまいますが、
そもそもモーダルを開くたびに、スライダー本体を作り直す必要はあるのでしょうか?

スライダー本体は最初に1つ作成しておき、.btnクリック内の処理は、

①モーダルとスライダー本体の表示
②表示したいスライダー部分への移動(swiper01.slideToLoop)

で、十分なのでは?と思いました。

、、、というようなことを踏まえて、一度処理全体を見直されることをお勧めいたします。

(本件とは直接関係ないところですが、new Swiper が2か所あるのも、気になりました・・・スライダーは2個必要なのかしら・・?)

投稿2019/05/23 09:49

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問