「Uncaught ReferenceError: Swiper is not defined at script.js:1」を解消したい

デモをそのまま引っ張ってきたのですが、そもそもSwiperが定義されていないと出てきてしまいます。
head内と</body>上にはしっかり配置できているのに定義できていない理由がよくわかりません。
分かる方教えてもらえるとありがたいです。
Swiper.js v5.2.1です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8    <link rel="stylesheet" href="css/swiper.min.css">
9    <link rel="stylesheet" href="css/main.css">
10    <script src="js/script.js"></script>
11    <title>Document</title>
12</head>
13<body>
14    <!-- Swiper START -->
15<div class="swiper-container">
16	<!-- メイン表示部分 -->
17	<div class="swiper-wrapper">
18		<!-- 各スライド -->
19		<div class="swiper-slide">Slide 1</div>
20		<div class="swiper-slide">Slide 2</div>
21		<div class="swiper-slide">Slide 3</div>
22		<div class="swiper-slide">Slide 4</div>
23    </div>
24    <div class="swiper-button-prev"></div>
25	<div class="swiper-button-next"></div>
26</div>
27<!-- Swiper END -->
28    <script src="js/swiper.min.js"></script>
29</body>
30</html>

JavaScript
1var mySwiper = new Swiper('.swiper-container', {
2    loop: true,
3    navigation: {
4		nextButton: '.swiper-button-next',
5        prevButton: '.swiper-button-prev'
6    }
7});

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

回答3件

ベストアンサー

HTML
1<script src="js/script.js"></script>
2<!-- 中略 -->
3<script src="js/swiper.min.js"></script>

↓

HTML
1<script src="js/swiper.min.js"></script>
2<script src="js/script.js"></script>

投稿2020/01/10 02:19

kei344

総合スコア69643

black-ddd

2020/01/10 02:33

無事動かせることができましたありがとうございます！

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

https://haniwaman.com/swiper/

上記のサイトをはじめとして自分が参考にしたサイトにはswiperのcssファイルとjsファイルの2つを読み込む必要があると記載されているので
swiperのサイトからDLしたjsファイルを読み込む記述を追加してみて試してみてはいかがでしょうか？

投稿2020/01/10 01:34

GenkiSugiyama

総合スコア86

公式ドキュメントによると以下の通りですが、ご提示のコードはこのどれにも当てはまっていないように見えます。

Initialize Swiper

Finally, we need to initialize Swiper in JS. There are few options/places to do that:

The best option will be in inline script or in script file that is included in the very end of body (right before closing </body> tag):
...
If you use jQuery/Zepto in your site, then you can initialize it in any of your JS files, but make sure that you do it within document.ready event:
...
Otherwise (but not recommended), you can initialize it within window.onload event:
Getting Started With Swiper

勝手訳：
最後に、JSでSwiperを初期化します。いくつかの選択肢/場所があります。
一番良いのはインラインスクリプトまたはスクリプトファイルの読み込みをbodyの一番最後（</body>タグの直前）に書くことです：
...
もし、jQuery/Zeptoを使っているなら、どのJSファイルでも初期化できますが、document.readyイベントの中に書いてください：
...
そうでなければ（推奨しませんが）、window.onloadイベントの中で初期化できます。

投稿2020/01/10 02:34