modaal.jsで実装したモーダル内にあるスライダーが動かない

前提・実現したいこと

modaal.jsで実装したモーダルウインドウの中に
Swiper.jsを使ってスライダーを作成したいです。
試したソースコードでは上手くいかず、こちらに質問させていただきました。

発生している問題

モーダルの中にあるスライダーが動かない。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
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="modaal.css">
10    <link rel="stylesheet" href="style.css">
11    <title>demo</title>
12</head>
13
14<body>
15    <div class="inline-wrap">
16        <a href="#inline" class="inline">モーダルを表示するリンク</a>
17    </div>
18
19    <!-- Slider全体のコンテナ -->
20    <div class="swiper-container">
21        <!-- Sliderの内包コンテナ -->
22        <div class="swiper-wrapper">
23            <!-- Slideさせたいコンテンツ -->
24            <div class="swiper-slide slide01">Slide 1</div>
25            <div class="swiper-slide slide02">Slide 2</div>
26            <div class="swiper-slide slide03">Slide 3</div>
27        </div>
28        <!-- ページネーション（※省略可） -->
29        <!-- <div class="swiper-pagination"></div> -->
30        <!-- ナビゲーションボタン（※省略可） -->
31        <div class="swiper-button-prev"></div>
32        <div class="swiper-button-next"></div>
33
34        <!-- スクロールバー（※省略可） -->
35        <!-- <div class="swiper-scrollbar"></div> -->
36    </div>
37
38    <div id="inline" style="display: none;">
39        <!-- Slider全体のコンテナ -->
40        <div class="swiper-container">
41            <!-- Sliderの内包コンテナ -->
42            <div class="swiper-wrapper">
43                <!-- Slideさせたいコンテンツ -->
44                <div class="swiper-slide slide01">Slide 1</div>
45                <div class="swiper-slide slide02">Slide 2</div>
46                <div class="swiper-slide slide03">Slide 3</div>
47            </div>
48            <!-- ページネーション（※省略可） -->
49            <!-- <div class="swiper-pagination"></div> -->
50            <!-- ナビゲーションボタン（※省略可） -->
51            <div class="swiper-button-prev"></div>
52            <div class="swiper-button-next"></div>
53
54            <!-- スクロールバー（※省略可） -->
55            <!-- <div class="swiper-scrollbar"></div> -->
56        </div>
57    </div>
58
59    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
60        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
61        crossorigin="anonymous"></script>
62    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
63    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
64    <script src="modaal.js"></script>
65    <script src="main.js"></script>
66</body>
67
68</html>

css
1.inline-wrap {
2  width: 100%;
3  height: 100vh;
4  display: -webkit-box;
5  display: -ms-flexbox;
6  display: flex;
7  -webkit-box-pack: center;
8      -ms-flex-pack: center;
9          justify-content: center;
10  -webkit-box-align: center;
11      -ms-flex-align: center;
12          align-items: center;
13}
14
15.inline {
16  text-decoration: none;
17  color: #333;
18  width: 30%;
19  padding: 30px;
20  text-align: center;
21  background-color: palevioletred;
22  -webkit-transition: 0.5s all;
23  transition: 0.5s all;
24}
25
26.inline:hover {
27  opacity: 0.7;
28}
29
30.swiper-container {
31  width: 80%;
32  height: 80vh;
33}
34
35.slide01 {
36  background-color: paleturquoise;
37  display: -webkit-box;
38  display: -ms-flexbox;
39  display: flex;
40  -webkit-box-pack: center;
41      -ms-flex-pack: center;
42          justify-content: center;
43  -webkit-box-align: center;
44      -ms-flex-align: center;
45          align-items: center;
46}
47
48.slide02 {
49  background-color: palegreen;
50  display: -webkit-box;
51  display: -ms-flexbox;
52  display: flex;
53  -webkit-box-pack: center;
54      -ms-flex-pack: center;
55          justify-content: center;
56  -webkit-box-align: center;
57      -ms-flex-align: center;
58          align-items: center;
59}
60
61.slide03 {
62  background-color: palegoldenrod;
63  display: -webkit-box;
64  display: -ms-flexbox;
65  display: flex;
66  -webkit-box-pack: center;
67      -ms-flex-pack: center;
68          justify-content: center;
69  -webkit-box-align: center;
70      -ms-flex-align: center;
71          align-items: center;
72}

js
1$(".inline").modaal({
2    animation_speed: '500', // アニメーションのスピード
3    background: '#fff',	// 背景の色を白に変更
4    overlay_opacity: '0.9',	// 背景のオーバーレイの透明度を変更
5
6});
7
8var mySwiper = new Swiper('.swiper-container', {
9    loop: true,
10    pagination: {
11        el: '.swiper-pagination',
12    },
13    navigation: {
14        nextEl: '.swiper-button-next',
15        prevEl: '.swiper-button-prev',
16    },
17    scrollbar: {
18        el: '.swiper-scrollbar',
19    },
20})

試したこと

モーダル外に作ったスライダーは動くのですが、
モーダルの中にスライダーを作ると動かなくなります。
modaal.jsとSwiper.jsの組み合わせが原因で動かなくなるのでしょうか？

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

回答1件

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

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

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

投稿2021/02/01 08:34