Swiper.jsの矢印（next、prev）ボタンが効かない？

2019.04.26

Swiper.jsといえば、言わずと知れたカーセルスライダーを簡単に実装できるjs。
先日知り合いから、「Swiper.jsの矢印が効かないんだけど、原因がわからない」と相談を受けたので、同じような人のためにmemoを残そうと思う。

解決方法

実はSwiperは結構古くからあるjsなので、何度かバージョンアップされています。
2019年4月時点ではバージョンが5.4.0となっていて、これが実は原因です。

ネットではCDNが主流になってきたために、Swiperの使い方が記載されたネット上の情報が、バージョンいくつのものなのかがわかりづらくなっています。
そのため、jsの書き方が変わったことに気づかずに古い記事のソースをそのまま書き写してしまうために動かないなどのトラブルが起こります。

今現在の新しいバージョン（5.4.0）では以下の記載でOK。

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
</script>

以前の古いバージョンでは

<script>
   var swiper = new Swiper ('.swiper-container', {
     nextButton: '.swiper-button-next',
     prevButton: '.swiper-button-prev',
   });
</script>

のように書くと動きます。
実行させる前に、Swiperのバージョンを確認しておくとよいですね。

ではでは。