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

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

ただいまの
回答率

89.20%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,405

kakeru99

score 13

やりたいこと

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

解決したいこと

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

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

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">

<p class="btn_a btn01">ボタン1</p>
<p class="btn_b btn01">ボタン2</p>
<p class="btn_c btn01">ボタン3</p>

  <div id="modal-main">
        <div id="slider_sample01" class="slider_wrap">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="http://placehold.jp/1000x300.png" alt="Aスライダー">
                    </div>
                    <div class="swiper-slide">
                            <img src="http://placehold.jp/1000x500.png" alt="Bスライダー">
                    </div>
                    <div class="swiper-slide">
                            <img src="http://placehold.jp/1000x800.png" alt="Cスライダー">
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev btn_left01"></div>
            <div class="swiper-button-next btn_right01"></div>
        </div>
        <!-- /.slider_sample01 -->
    </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
    <script>
      $(document).ready(function() {
        //            モーダルウィンドウ
        //テキストリンクをクリックしたら
        $(".btn01").click(function() {
            //body内の最後に<div id="modal-bg"></div>を挿入
            $("body").append('<div id="modal-bg"></div>');

            let slider_count = $('.swiper-slide').length;
            var mySwiper = new Swiper('.swiper-container', {
                loop: true,
                speed: 500,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }
            })
            realIndex = this.realIndex;
            slideClass = jQuery('.swiper-slide-' + realIndex);

            var swiper01 = new Swiper('#slider_sample01 .swiper-container', {
                navigation: {
                    prevEl: '.btn_left01',
                    nextEl: '.btn_right01',
                },
                autoHeight: true,
                roundLengths: true,
                loop: true,
                on: {
                    slideChange: function() {
                        let slider_num = this.realIndex;
                        if (slider_num === 0) {
                            $('.btn_left01').text('Cスライダー');
                            $('.btn_right01').text('Bスライダー');
                        } else if (slider_num === 1) {
                            $('.btn_left01').text('Aスライダー');
                            $('.btn_right01').text('Cスライダー');
                        } else if (slider_num === 2) {
                            $('.btn_left01').text('Bスライダー');
                            $('.btn_right01').text('Aスライダー');
                        }
                    }
                }
            });
            $('.btn_a').click(function() {
                swiper01.slideToLoop(0);
            });
            $('.btn_b').click(function() {
                swiper01.slideToLoop(1);
            });
            $('.btn_c').click(function() {
                swiper01.slideToLoop(2);
            });


            //画面中央を計算する関数を実行
            modalResize();
            //モーダルウィンドウを表示
            $("#modal-bg,#modal-main").fadeIn("slow");
            $("#modal-bg,#btn_close").click(function() {
                $("#btn_close,#modal-bg,#modal-main").fadeOut("slow", function() {
                    $('#modal-bg').remove();
                });

            });

        $(window).resize(modalResize);
        function modalResize() {
            var w = $(window).width();
            var h = $(window).height();

            var cw = $("#modal-main").outerWidth();
            var ch = $("#modal-main").outerHeight();
            $("#modal-main").css({
                "left": ((w - cw) / 2) + "px",
                "top": ((h - ch) / 8) + "px"
            });
        }

        });
        });
    </script>
body {
  background: #ffffff;
  padding: 20px;
  font-family: Helvetica;
  position: relative;
}


/* モーダル コンテンツエリア */
#modal-main {
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 2;
}

/* モーダル 背景エリア */
#modal-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}



.slider_wrap {
  position: absolute;
  width: 1140px;
  margin: 0 auto;
  left: 50%;
  margin-left: -570px;
  top: 0;
  z-index: 100;
}

.btn01:hover {
  cursor: pointer;
}

コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 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個必要なのかしら・・?)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる