モーダルウィンドウで、スライダーを実行する方法について

前提・実現したいこと

モーダルウィンドウを開いた時に
swiper.jsを使ってスライダーを表示させたいです。　

発生している問題・エラーメッセージ

モーダルを開いた時、スライダーのサイズが設定したサイズよりも小さくなっており
また、swiperの矢印を押下してもスライダーが動きません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
8    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
9    <link rel="stylesheet" href="css/modaal.min.css">
10    <link rel="stylesheet" href="css/style.css">
11    <title>dummy</title>
12</head>
13
14<body>
15
16    <div class="dummy-wrap">
17        <div class="dummy-btn">
18            <a class="modal" href="#modal01">modal01</a>
19        </div>
20    </div>
21
22    <div id="modal01" style="display:none;" class="">
23        <div class="dummy-modal-wrap">
24            <div class="dummy-modal-content">
25                <p>これはサンプルです。</p>
26                <div class="dummy-modal-slider">
27                    <div class="swiper-container">
28                        <!-- Additional required wrapper -->
29                        <div class="swiper-wrapper">
30                            <!-- Slides -->
31                            <div class="swiper-slide">Slide 1</div>
32                            <div class="swiper-slide">Slide 2</div>
33                            <div class="swiper-slide">Slide 3</div>
34                        </div>
35                        <!-- If we need pagination -->
36                        <div class="swiper-pagination"></div>
37
38                        <!-- If we need navigation buttons -->
39                        <div class="swiper-button-prev"></div>
40                        <div class="swiper-button-next"></div>
41
42                        <!-- If we need scrollbar -->
43                        <div class="swiper-scrollbar"></div>
44                    </div>
45                </div>
46            </div>
47        </div>
48    </div>
49
50
51    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
52        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
53        crossorigin="anonymous"></script>
54    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
55    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
56    <script src="js/modaal.min.js"></script>
57    <script src="js/main.js"></script>
58</body>
59
60</html>

css
1.dummy-wrap {
2  width: 80%;
3  height: 50vh;
4  margin: 0 auto;
5  display: -webkit-box;
6  display: -ms-flexbox;
7  display: flex;
8  -webkit-box-align: center;
9      -ms-flex-align: center;
10          align-items: center;
11  -webkit-box-pack: center;
12      -ms-flex-pack: center;
13          justify-content: center;
14  background-color: papayawhip;
15}
16
17.dummy-wrap:nth-child(odd) {
18  background-color: paleturquoise;
19}
20
21.modal {
22  font-size: 20px;
23  text-decoration: none;
24  color: #333;
25  border: 1px solid #333333;
26  padding: 30px;
27  -webkit-transition: 0.5s;
28  transition: 0.5s;
29}
30
31.modal:hover {
32  background-color: #333;
33  color: #fff;
34}
35
36.dummy-modal-wrap {
37  background-color: gray;
38  height: 100vh;
39  padding: 100px;
40  display: -webkit-box;
41  display: -ms-flexbox;
42  display: flex;
43  -webkit-box-pack: center;
44      -ms-flex-pack: center;
45          justify-content: center;
46  text-align: center;
47}
48
49.dummy-modal-content {
50  width: 100%;
51}
52
53.dummy-modal-content p {
54  margin-bottom: 10px;
55}
56
57.dummy-modal-slider {
58  width: 90%;
59  height: 70vh;
60  margin: 0 auto;
61  background-color: peru;
62}
63
64.swiper-container {
65  background-color: olivedrab;
66  max-width: 100vh;
67  height: 300px;
68  margin: 30px 0;
69}
70
71.swiper-slide {
72  width: 100%;
73  height: 100%;
74  display: -webkit-box;
75  display: -ms-flexbox;
76  display: flex;
77  -webkit-box-align: center;
78      -ms-flex-align: center;
79          align-items: center;
80  -webkit-box-pack: center;
81      -ms-flex-pack: center;
82          justify-content: center;
83}
84
85.swiper-slide:nth-child(odd) {
86  background-color: plum;
87}
88
89.dummy-modal-slider {
90  display: -webkit-box;
91  display: -ms-flexbox;
92  display: flex;
93  -webkit-box-pack: center;
94      -ms-flex-pack: center;
95          justify-content: center;
96  -webkit-box-align: center;
97      -ms-flex-align: center;
98          align-items: center;
99}

js
1
2$('.modal').modaal({
3  background: '#fff',	// 背景の色を白に変更
4  animation_speed: '500', 	// アニメーションのスピードをミリ秒単位で指定
5  overlay_opacity: '0.9',	// 背景のオーバーレイの透明度を変更
6  fullscreen: 'true',	// フルスクリーンモードにする
7  // background_scroll: 'true',	// 背景をスクロールさせるか否か
8  // loading_content: 'Now Loading, Please Wait.'	// 読み込み時のテキスト表示
9});
10
11let mySwiper = new Swiper('.swiper-container', {
12  loop: true,
13  slidesPerView: 1, // スマホでは1枚を中央に、.5で見切れ具合を調整
14  spaceBetween: 30,
15  centeredSlides: true,
16  navigation: {
17    nextEl: '.swiper-button-next',
18    prevEl: '.swiper-button-prev',
19  },
20
21  pagination: {
22    el: '.swiper-pagination',
23    clickable: true,
24  },
25
26});
27

試したこと

デベロッパーツールを開き、ブラウザのサイズを変更するとスライダーが
動くようになりましたが、スライドするコンテンツのサイズが設定した値と異なります。
再度、デベロッパーツールでブラウザのサイズを変更したら
コンテンツのサイズが期待値通りになります。

拙い技術と質問で申し訳ありません。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

ベストアンサー

過去質問に類似するものがありましたが、いかがでしょうか。

swiper に限らず、非表示にされることを想定していないライブラリが多いので、組み合わせるのは結構難しいとは思います。

リサイズで処理が問題なく戻るなら、ページを切り替えたタイミングで、update処理をするか triggerでリサイズイベントを起こしてしまうか、どちらかしてみてはいかがでしょう。
JavaScript - bookblock内でのswiper使用（リサイズしないと動作しない原因について）｜teratail

投稿2021/01/29 05:41