Q&A
前提・実現したいこと
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件
0
ベストアンサー
読み込みの順番かと思うのですが、
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
総合スコア423
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/30 16:13
2020/03/30 16:26
2020/03/30 16:27
2020/03/30 16:29
2020/03/30 16:30
2020/03/30 16:32
2020/03/30 16:35
2020/03/30 16:36
2020/03/31 00:14