chromeのtoggle device toolbar（検証→Ctl+Shift+M）を押さないとjsが反応しない

Question

swiper.jsを使ってモーダルの中にスライダーを追加しました。
通常ボタンを押すかスワイプで次のページへ移行するのですが機能せず、検証画面のタグにあるtoggle device toolbarのボタンを押すと反応するようになりました。
原因がわかる方いらっしゃれば回答お待ちしております。

・モーダルに使っているブートストラップJS/CSS
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
・スライダーに使っているswiper参考にしたGitHab
https://github.com/nolimits4web/Swiper/blob/master/demos/010-default.html

<div class="kyousitu_help_btn">
  <ul>
    <li id="btn"><a data-toggle="modal" data-target="#btn1" href="#btn1"><span>ボタン１</span></a></li>
    <li id="jukou"><a data-toggle="modal" data-target="#btn2" href="#btn2"><span>ボタン２</span></a></li>
  </ul>
</div>
<!-- Modal content(btn1)-->
<div id="btn1" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <!-- モーダルボディ -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div><h4>1:1枚目</h4></div>
              <div><p>1枚目</span></p></div>
            </div>
            <div class="swiper-slide">
              <div><h4>2:2枚目</h4></div>
              <div><p>2枚目</p></div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal content(btn2)-->
<div id="btn2" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <!-- モーダルボディ -->
        <div class="swiper-container" id="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div><h4>1:1枚目</h4></div>
              <div><p>1枚目</span></p></div>
            </div>
            <div class="swiper-slide">
              <div><h4>2:2枚目</h4></div>
              <div><p>2枚目</p></div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination" id="pagination2"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-prev" id="prev2"></div>
        <div class="swiper-button-next" id="next2"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>
<script>
console.log('オプション');
  var swiper = new Swiper('#swiper-container', {
    navigation: {
      nextEl: '#next2',
      prevEl: '#prev2',
    },
    pagination: {
      el: '#pagination2',
      type: 'bullets',
    },
  });
( function () {
  var mySwiper = new Swiper( '.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
      draggable: true,
    },
  });
} )();
</script>

Comments

[x_x]

問題の再現するコードをお願いします

[ya_suhn]

モーダルを外すと通常通り動くみたいです。
モーダルには以下のJS、CSSを使っています。
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

コンソールにエラーが出ていたのでこちらも関係しているのでしょうか・・？
Cannot read property 'addEventListener' of undefined
at h.enableDraggable

Answer 1

エラーはHTMLに記述が足りないためです。

<div class="swiper-scrollbar"></div>

https://github.com/nolimits4web/Swiper/blob/master/demos/080-scrollbar.html

さらに複数設置していることで起きている問題(両方動いてしまう)と、Bootstrapとの問題があるようですが、複数のほうは過去の質問では解決しているようでよくわかりません。
swiper.jsで複数のスライダーを設置したが左右ボタンが効かない
https://teratail.com/questions/118992

-- 追記
あらかじめ Swiper を用意しておくのが難しいので、モーダルが開いたときに作ったほうがいいかと思います。

var mySwiper;
$(document).on('shown.bs.modal', function(event) {
  var container = $(event.target);
  mySwiper = new Swiper(container.find('.swiper-container')[0], { /* options */ });
}).on('hide.bs.modal', function(event) {
  mySwiper.destroy();
});

https://getbootstrap.com/docs/3.3/javascript/#modals-events

Comments

[ya_suhn]

jQueryの文を足したら上手く動きました！ありがとうございます！