swiper.js(スライド）のナビゲーションボタンが効かない

### 前提・実現したいこと

HTMLでswiperのプラグインを使って、スライドのサンプルを作成してみたところ、
オプションでナビゲーションを設定したのですが、
矢印マーク（＜、＞）は表示されるものの、クリックしても動きません。
（画像自体を触ると、スライドするので、プラグイン自体は効いてると思われます。）

コードは最低限だけ書いてるので、ボタンが効かない理由がわからず、教えてください。

**### 該当のソースコード### ### ### ### ### ### ### ### **

<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> <title>test-slide</title> </head> <body> <div class="swiper-container"> <ul class="swiper-wrapper" style="align-items: flex-end;">

  <li class="swiper-slide">
    <img src="image/pic1.jpg" alt="写真１" style="width:200px">
  </li>
  
  <li class="swiper-slide">
<img src="image/mv3.jpg" alt="写真２" style="width:200px">
  </li>

  <li class="swiper-slide">
    <img src="image/mv2.jpg" alt="写真３" style="width:200px">
  </li>
</ul>

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </body> </html>

試したこと

不要な他のjQueryなどは削除し、
現在このhtmlに紐づいているのは、
swiper.min.js
swiper.min.cssのみです。

お分かりの方、不備などあればご指摘ください。

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

回答2件

ベストアンサー

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

投稿2018/10/08 08:04

編集2018/10/08 08:12

miyakichi

総合スコア297

nan9

2018/10/08 08:21

ご回答頂き、ありがとうございます！！ご教示いただいた内容で試したところ、うまく動きました＾＾スクールでも分からないと言われ...本当に助かりました。ありがとうございました！

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

まるまるこれに変えてみてください。

JS
1var mySwiper = new Swiper ('.swiper-container', {
2  loop: true,
3  freeMode: true,
4
5  navigation: {
6    nextEl: '.swiper-button-next',
7    prevEl: '.swiper-button-prev',
8  },
9});

投稿2018/10/08 07:43

退会済みユーザー

総合スコア0

退会済みユーザー

2018/10/08 07:45

‘mySwiper’の部分が問題だったのでは？

nan9

2018/10/08 07:53

ご回答いただき、ありがとうございます＞＜まるっと書き換えてみたのですが、変わらずボタンクリックが効きませんでした。スクールに通っていて、先生にもみてもらったのですが、、「動かない理由が分からないですね、、」と言われ、解決できずじまいで、どうしたものか。。コメント頂き、ありがとうございました！

退会済みユーザー

2018/10/08 08:02 編集

今読み込んでいるjs類全部わかりますか？もしかしたら紐付け以外の問題かもしれません。

nan9

2018/10/08 08:19

今、読み込んでいるjsは「swiper.min.js」のみでした＞＜過去の投稿で、複数のjQuery、js読み込ませているとうまく動かないとの投稿をチェックしたので、そこも踏まえてみました。本件自体は、２番目にいただい回答方法で試したところ解決したしたのですが、色々とご助言頂き、感謝の限りですm(> <)m ありがとうございました！

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

あなたの回答