swiperでスライダーを実装したのですが、jsを外部スクリプトで読み込むとスライダーが機能しない

前提・実現したいこと

javaScriptを外部スクリプトで記述して、swiperでスライダーを実装させたい

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

スライダー系プラグイン「swiper」を使ってサイトにスライダーを実装したいのですが、
外部スクリプトで読み込むとスライダーが機能しなくなります。
インラインスクリプトで同じコードを埋め込むと正常に機能します。

該当のソースコード

【html】
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="swiper.css">
  <title>Title</title>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://haniwaman.com/wp-content/uploads/2018/05/swiper01.png" alt="Swiper01"></div>
      <div class="swiper-slide"><img src="https://haniwaman.com/wp-content/uploads/2018/05/swiper02.png" alt="Swiper02"></div>
      <div class="swiper-slide"><img src="https://haniwaman.com/wp-content/uploads/2018/05/swiper03.png" alt="Swiper03"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
<script src="swiper.js"></script>

</body>
</html>

【javaScript】※外部スクリプトとしてjsファイルを用意し、コードを記述しています。
var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

試したこと

①jsファイルとhtmlファイルのリンクがうまくいってない？
⇒jsファイルにアラートを表示するコードを記述したところ、きちんと反映されました。

②jsのコードが間違っている？
⇒インラインスクリプトで同じコードを記述するときちんとスライダーが機能しました。

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

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

kei344

2020/03/09 05:13

「外部スクリプト」のファイル名も提示してください。

homareendo

2020/03/09 06:59

「swiper.js」です。ちなみにcssファイル名は「swiper.css」です。

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

回答1件

ベストアンサー

kei344 2020/03/09 14:13

「外部スクリプト」のファイル名も提示してください。

homareendo 2020/03/09 15:59

「swiper.js」です。
ちなみにcssファイル名は「swiper.css」です。

swiper本体のjsが読み込まれていません。

投稿2020/03/09 07:03

kei344

総合スコア69606

homareendo

2020/03/09 07:15 編集

迅速な回答感謝です！ダウンロードしたswiperのフォルダには 6つほどjsファイルがあったのですが、本体のjsとはどのファイルにあたるのでしょうか？以下6つのjsファイル名です・swiper.min ・swiper ・swiper.esm ・swiper.esm.bundle ・swiper.esm.browser.bundle.min ・swiper.esm.browser.bundle