swiper.jsでサンプルサイトのソースコードをコピペしても戻る・進む(prev/next)ボタンが動作しないとき

知識を提供してくれるblogサイトに感謝を。

CDNswipe.jsを読み込んだときに、「このコードで動作します」というコードをコピーペーストしても何故か進む・戻るだけが動作しなくて頭をひねった。
もっともswipe.jsのドキュメントを読めば話は終わりなのだが、時間がないの!助けて!というときはドツボにハマってそんなことにすらたどり着けない。
今日のボクです。

そんなわけでオチとしては、戻る・進むボタンに指定する方法がswipe.jsのバージョンで異なる。

最新のcdn読み込みswipe.js用の指定方法(2021.09.15現在 v7.0.5)

// CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.5/swiper-bundle.min.js"></script>

<script>
// 最新のcdn読み込みswipe.js用(2021.09.15現在 v7.0.5)
  var mySwiper = new Swiper ('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
</script>

旧versionのswipe.js用の指定方法

<script>
// 旧バージョンのswipe.js(サンプルサイトのコードによくある記述)
   var swiper = new Swiper ('.swiper-container', {
     nextButton: '.swiper-button-next',
     prevButton: '.swiper-button-prev',
   });
</script>

お困りの方のお役に立てば幸い。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください