swiperとdrawerを同時に使う方法がわからない（プラグを複数使う方法がわからない）

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

独学の初心者です。
複数のプラグインを同時に使う方法について教えてください。
別ファイルでわける方法や順番などわかりません。
使用しているプラグはswiperとdrawerです。

該当のソースコード

html
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>swip</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/drawer.css">
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/suliders.css">

</head>
<body>
  <header>
    <div class="drawer drawer--left">
      <div role="banner">
        <button type="button" class="drawer-toggle drawer-hamburger">
          <span class="sr-only">toggle navigation</span>
          <span class="drawer-hamburger-icon"></span>
        </button>
        <nav class="drawer-nav" role="navigation">
          <ul class="drawer-menu">
            <li><a class="drawer-brand" href="#">Brand</a></li>
            <li><a class="drawer-menu-item" href="#">Nav1</a></li>
            <li><a class="drawer-menu-item" href="#">Nav2</a></li>
          </ul>
        </nav>
      </div>
      </div>
      </header>
  </header>
  <main>
    <div class="sample sample01">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"  style="background-image: url('https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/img/img01.png');"></div>
          <div class="swiper-slide" style="background-image: url('https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/img/img02.png');"></div>
          <div class="swiper-slide" style="background-image: url('https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/img/img03.png');"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </main>
  <footer>

  </footer>
  <script src="js/jquery-3.5.0.js"></script>
    <script src="js/drawer.js"></script>
      <script src="js/iscroll.js"></script>
  <script src="js/swiper.js"></script>
    <script src="js/hajo.js"></script>
<script src="js/menu.js"></script>
    </body>
</html>
cssコード
body{
  margin: 0;
  height: 1500px;
}
.wrap{
  padding: 16px;
}

.swiper-wrapper {
	width: 100%;
	height:500px;

}
/* 全スライド共通スタイル */
.swiper-slide {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
jsコード（スライド用）
  let swipeOption = {
    loop: true,
    effect: 'fade',
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
  navigation: {
      nextEl: '.swiper-button-next',  //「次へ」ボタンの要素のセレクタ
      prevEl: '.swiper-button-prev',  //「前へ」ボタンの要素のセレクタ
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  speed: 2000,
  }
  new Swiper('.swiper-container', swipeOption);
  $(document).ready(function() {
    $('.drawer').drawer();
  });
jsコード（ハンバーガーメニュー用）
$(document).ready(function() {
  $('.drawer').drawer();
});

試したこと

順番を変えたりしましたがわかりませんでした。

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

ここにより詳細な情報を記載してください。

CHERRY

2020/04/28 20:45

Web ブラウザのデベロッパーツールのコンソールには、何かメッセージは出ていますか？

taotaodao

2020/04/28 21:14

特には。drawerのcdnを使ってその下にjsファイルを置いたら二つともきれいに表示されました。根本的な解決にはなってませんがやはりコードの置き方なのかもしれません。パスはちゃんとやってもダメでした。ポートフォリオに入れる架空サイト作りですけどとりあえずこのままでやってみようかと思ってます。解決法が見つかったら修正しますが。

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

回答1件

こんにちは、CDNを使いコードを書いてみました。
希望どうりに動くか分かりませんが以下を参考にしてみてください。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>swip</title>
7
8    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
10    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
11    <style>
12        body {
13            margin: 0;
14            height: 1500px;
15        }
16
17        .wrap {
18            padding: 16px;
19        }
20
21        .swiper-container {
22            width: 100%;
23            height: 500px;
24        }
25
26        /* 全スライド共通スタイル */
27        .swiper-slide {
28            color: #ffffff;
29            width: 100%;
30            height: 100%;
31            text-align: center;
32            line-height: 250px;
33        }
34    </style>
35
36    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
37    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
38    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
39    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
40    <script>
41        $(function () {
42            $('.drawer').drawer();
43
44            let swipeOption = {
45                loop: true,
46                effect: 'fade',
47                autoplay: {
48                    delay: 4000,
49                    disableOnInteraction: false,
50                },
51                navigation: {
52                    nextEl: '.swiper-button-next', //「次へ」ボタンの要素のセレクタ
53                    prevEl: '.swiper-button-prev', //「前へ」ボタンの要素のセレクタ
54                },
55                pagination: {
56                    el: '.swiper-pagination',
57                    clickable: true,
58                },
59                speed: 2000,
60            }
61            new Swiper('.swiper-container', swipeOption);
62        });
63    </script>
64</head>
65
66<body>
67    <header>
68        <div class="drawer drawer--left">
69            <div role="banner">
70                <button type="button" class="drawer-toggle drawer-hamburger">
71                    <span class="sr-only">toggle navigation</span>
72                    <span class="drawer-hamburger-icon"></span>
73                </button>
74                <nav class="drawer-nav" role="navigation">
75                    <ul class="drawer-menu">
76                        <li><a class="drawer-brand" href="#">Brand</a></li>
77                        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
78                        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
79                    </ul>
80                </nav>
81            </div>
82        </div>
83    </header>
84    <main>
85        <div class="sample sample01">
86            <div class="swiper-container">
87                <div class="swiper-wrapper">
88                    <div class="swiper-slide"
89                        style="background-image: url('https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/img/img01.png');">
90                    </div>
91                    <div class="swiper-slide"
92                        style="background-image: url('https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/img/img02.png');">
93                    </div>
94                    <div class="swiper-slide"
95                        style="background-image: url('https://xn--web-oi9du9bc8tgu2a.com/demos/swiper/img/img03.png');">
96                    </div>
97                </div>
98                <div class="swiper-pagination"></div>
99                <div class="swiper-button-prev"></div>
100                <div class="swiper-button-next"></div>
101            </div>
102        </div>
103    </main>
104    <footer>
105
106    </footer>
107</body>
108
109</html>