Swiper.js が動作しない原因と対応方法【javascript】

jQueryが不要でjavascriptのみで動作するスライダーライブラリ swiper.js。

https://swiperjs.com/

レスポンシブでモバイルにも対応しています。

Swiperの使い方

簡単にSwiperの使い方を下記に説明します。

Swiperインストール

Swiperのjavascriptを読み込みます。ここではCDNで提供されている最新バージョンを利用します。

// CSS
<link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css">

// JavaScript
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML作成

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide1</div>
    <div class="swiper-slide">Slide2</div>
    <div class="swiper-slide">Slide3</div>
  </div>

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

クラス定義は上記の構造でないと動作しないので気をつけましょう。

javascript作成

Swiperクラスを生成しオプションを指定します。

var Swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

これで設定完了です。

動作デモ

https://choppydays.com/static/swiperjs/

Swiper.jsが動作しない主な原因

環境や設定によってSwiperが動作しない場合があります。

下記に動作させるための設定を記載します。

Swiperバージョンでオプション指定が異なる

Swiperバージョン5以降は、スライドボタンを表示するnavigation の指定が異なります。

// バージョン5以降の定義方法
var Swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
})
// バージョン4以前の定義方法
var Swiper = new Swiper ('.swiper-container', {
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
});

Swiperのpaginationをクリックしても反応しない

Swiperのpaginationをクリックしても反応しない場合は、paginationオプションの指定に下記を追加します。

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },

Swiper.jsでNavigation のprev、nextボタンが反応しない

Swiperでスライドはするものの、動作が不安定で Prev Nextボタンが反応しない場合があります。

不具合デモ

https://choppydays.com/static/swiperjs/prevnextnotworking.html

動きがおかしい、反応しない原因は 「CSS」

WordPressで設置した場合などで、Swiper読み込み、オプションの設定は正しいにも関わらず動作がおかしい場合があります。

調査した結果、Wordpressのデフォルトテーマ「TwentyTwenty」などに含まれるCSSが原因の場合があります。

問題となるCSS

* {
   transition-duration: 0s !important;
}

上記を削除する、または定義をSwiper部分のみ上書きします。

@media ( prefers-reduced-motion: reduce ) {
   .sip-slider, .swiper-container, .swiper-wrapper, .swiper-slide, .swiper-slide img{
    transition-duration: 100ms !important;
  }
}

transition-duration を強制的に0s にする定義がある場合、SwiperのPrev、Nextボタンが効かなかったり、スライドアニメーションが反応しないようになっています。

その場合は上記CSSを無効化する、またはSwiper定義部分のみ再定義することで動作が可能です。

コメントを残す

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