swiper.jsが動かない

前提・実現したいこと

swiper.js を使って画像スライドの実装をしたいのですが、javascriptが動かなくて困っています。
swiper.css等は機能しているみたいなのですが、javascriptだけどうも実装してくれません。
どなたかわかる方いらっしゃいましたら、ご回答のほどよろしくお願いいたします

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

Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at Swiper.slideTo (VM4385 swiper.js:2207)
    at Swiper.slidePrev (VM4385 swiper.js:2286)
    at Swiper.onPrevClick (VM4385 swiper.js:5399)
    at HTMLDivElement.handleEvent (VM4385 swiper.js:331)
slideTo @ VM4385 swiper.js:2207
slidePrev @ VM4385 swiper.js:2286
onPrevClick @ VM4385 swiper.js:5399
handleEvent @ VM4385 swiper.js:331
エラーメッセージ

該当のソースコード

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
   
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="viewport" content="width=1280">
    <!-- Bootstrap CSS -->
   
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/05a9391f36.js" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="dist/css/swiper.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>moritama</title>
  </head>

     <div id="screenshot">
       <div class="screenshot text-center">
        
        
        <div id="img-box">
    <img class="bg-screenshot" src="img/bg-screenshot.png">
    <div id="img-box-mini" class="screenshot-title"><h1  id="img-box-text">SCREENSHOT</h1>
    
   
     <div class="swiper-container">
   <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="dist/js/swiper.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
</script>
</div>
       </div>
       </div>
     </div>
     </div>

 <script src="dist/js/swiper.js"></script>
     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script src="https://unpkg.com/ityped@1.0.3"></script>
     <script type="text/javascript" src="js/script.js"></script>
    
    
     
  </body>
</html>
ソースコード

試したこと

下記のように重複しているところを修正いたしました。

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script src="https://unpkg.com/ityped@1.0.3"></script>
     <script type="text/javascript" src="js/script.js"></script>
     <script src="dist/js/swiper.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
</script>

ここに問題に対して試したことを記載してください。

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

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

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

回答1件

ベストアンサー

読み込みの順番かと思うのですが、

javascript
1<script>
2  var swiper = new Swiper('.swiper-container', {
3    navigation: {
4      nextEl: '.swiper-button-next',
5      prevEl: '.swiper-button-prev',
6    }
7  });
8</script>

を、下から3行目の

javascript
1<script type="text/javascript" src="js/script.js"></script>

の下におくとどうなりますか？

それと、このコード重複してますよね？

<script src="dist/js/swiper.js"></script>

投稿2020/03/30 15:57

s.k

総合スコア423

kenshou

2020/03/30 16:13

回答ありがとうございます。試してみたのですがやはり動きませんでした。

s.k

2020/03/30 16:26

エラーの内容は全く同じですか？

s.k

2020/03/30 16:27

ここを参考にしているんですかね？ https://swiperjs.com/get-started/

kenshou

2020/03/30 16:29

すみません！！エラー文を確認するためにもう一度確かめてみたところ治っておりました！！ありがとうございます！！

s.k

2020/03/30 16:30

よかったです！

kenshou

2020/03/30 16:32

すみません勢いあまって治ったといってしまったのですが検証ツールを開くと実装ができるのですがそのあと更新するとまた動かなくなり、再度検証ツールを開くとうごくようになります、、

kenshou

2020/03/30 16:35

ちなみにエラー文は先ほどと同じでした

s.k

2020/03/30 16:36

kenshou

2020/03/31 00:14

ダメでした。しかし、相変わらず検証ツールを開くと動作ができるようになります

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！