ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

Swiper.jsの使い方、動かないときの対処法(v6.3.2,v5.4.5 + IE11)

Swiper.jsの使い方、動かないときの対処法(v6.3.2,v5.4.5 + IE11)

「Swiperの使い方を知りたい」

「Swiperが動かないけどどうすればいいの?」

悩み

こんな悩みにお答えします。

Webサイトにスライダーを設置するには、Swiperがおすすめです。

最新のバージョン6系はIE11で動作しないようなので、IE対応をしなくてよい場合を除いて、今のところはバージョン5系を使うほうがよそうです。

2015年からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきましたが、コーポレートサイトではほとんどのWebサイトで設置するほどスライダーはよく使います。

この記事では以下のことがわかります。

  • Swiperの使い方
  • Swiperが動かないときの対処法

記事を読み終えると、WebサイトにSwiper.jsを使ったスライダーを設置することができます。

目次
  1. Swiper とは
  2. Swiperの使い方
    1. プラグインの読み込み
    2. HTMLを記述する
    3. JavaScriptを記述する
  3. Swiperが動かないときの対処法
    1. JavaScript、CSSファイルが読み込めているか確認する
    2. バージョンがあっているか確認する
      1. 進む・戻るボタンが動かない
      2. autoplayが動かない
      3. IE11で動かない
    3. fadeの動きがおかしい
  4. まとめ

Swiper とは

Swiperは、Webサイトにスライダー、カルーセルなどを設置できるJavaScriptプラグインです。
スライダープラグインは、Swiperの他にSlick、bx-sliderなどが有名です。
他のプラグインとは違うSwiperの特徴として、jQuery不要で使えるということがあります。
jQueryが不要なので、jQueryのバージョンに左右されることなく、動きも滑らかに感じられます。

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

POINT
SwiperはjQuery不要でスライダーを設置することができる!

Swiperの使い方

プラグインの読み込み

まず、ファイルをダウンロードするか、CDNから読み込みます。

バージョン6がリリースされたばかりです。
ちょっと使ってみた感じでは、基本的な使い方はバージョン5と違いは無さそうです。
できればバージョン6、最新バージョンを使うことに不安があればバージョン5を使ってください。

バージョン6
// CSS
<link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css">

// JavaScript
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
バージョン5
// CSS
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">

// JavaScript
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

HTMLを記述する

Swiperを使用するとき、HTMLの基本パターンは以下のようになります。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</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>

以下、4つの要素は不要であれば書かなくても大丈夫です。

  1. swiper-pagination
  2. swiper-button-prev
  3. swiper-button-next
  4. swiper-scrollbar

JavaScriptを記述する

Swiperを使用するとき、HTMLの基本パターンは以下のようになります。

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',
  },
})
よく使うオプション
パラメータ 初期値 説明
speed number 300 スライド間の遷移時間(ミリ秒)
effect string 'slide' 遷移効果。
"slide", "fade", "cube", "coverflow", "flip"のいずれか
spaceBetween number 0 スライド間の距離(ピクセル単位)。
slidesPerView number or 'auto' 1 ビューあたりのスライドの数(スライドは、スライダーのコンテナーで同時に表示されます)。
centeredSlides boolean false trueの場合、アクティブなスライドは中央に配置され、常に左側に配置されるわけではありません。
autoplay object/boolean trueでデフォルト設定。オブジェクトで詳細設定ができます。
breakpoints object さまざまなレスポンシブブレークポイント(画面サイズ)にさまざまなパラメーターを設定できます。
loop boolean false 連続ループモードを有効にするには、trueに設定します

オプションはもっとたくさんあるので、公式を参照してください。

Swiperが動かないときの対処法

JavaScript、CSSファイルが読み込めているか確認する

基本中の基本ですが、プラグインファイルの読み込みを再確認してみてください。

個人的には、JavaScriptは読み込んでいていろいろ設定したあとに動かないと思ってみると、CSSファイルを読み込んでなかったということがときどきあります。

ファイルをダウンロードして使う場合は、パスなどの記述ミスがないか確認してみてください。

// JavaScript
<script src="./js/swiper.js"></script>

CDNを使う場合でも、SSLに対応しているかどうかで読み込めないことがあります。
「https://」「http://」の違いで読み込めないことを防止するために、「//」だけにすることをおすすめします。

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

バージョンがあっているか確認する

Swiperが動かないとき、使用するSwiperのバージョンと、参考にした解説ブログのバージョンが違っていることが多いです。

SwiperはバージョンによってJavaScriptのオプション設定の書き方が変わっています。
「Swiper」で検索したとき上位に表示されるブログの解説を見てもバージョン5、バージョン4が混在している状況なので注意が必要です。
さらに、バージョンをはっきり書いていないブログが上位表示されていることもあります。
これで解決できる可能性は高いです。

バージョン3以前は、これから新たに使うことや、検索上位に表示されていることはないと思いますが、バージョン4以降については注意してください。

  1. バージョン6 … 2020年7月3日~
  2. バージョン5 … 2019年9月17日~
  3. バージョン4 … 2017年8月30日~
  4. バージョン3 … 2015年2月11日~
POINT
Swiperが動かないときはバージョンを確認する!

進む・戻るボタンが動かない

進む・戻るボタンが動かない場合は、jsのオプションの書き方を確認して、バージョンにあった書き方をしてください。

// バージョン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',
});

autoplayが動かない

autoplayが動かない場合は、jsのオプションの書き方を確認して、バージョンにあった書き方をしてください。

// バージョン4以降の書き方
var Swiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
});
// バージョン3以前の書き方
var Swiper = new Swiper ('.swiper-container', {
  autoplay: 5000,
});

IE11で動かない

バージョン6はIE(Internet Explorer)11で動かないようです。

バージョン5もIE11で動かないという情報もありましたが、こちらで確認するかぎりバージョン5.4.5は動作を確認できました。
バージョン6.3.2とまったく同じHTMLソースでJavaScriptとCSSだけ入れ替えました。

  1. バージョン6.3.2 … IE11動かない
  2. バージョン5.4.5 … IE11動く

fadeの動きがおかしい

スライドの画像をfadeさせるときに、以下のような現象がおきることがあります。

  • 透過して裏写りしている
  • 前の画像の残像が残っている

フェイドイン/フェイドアウトのスライダーを設定する場合、effect: "fade"を設定するだけでは挙動がおかしいようです。

fadeEffectを設定していない場合は、crossFade: trueを設定してみてください。

また、loopをtrueにしていると、swiper-slideの前後にswiper-slide-duplicateという要素が追加されてしまいます。
fadeのときは、loopがなくても

loop:trueにしている場合は、loop:falseにする、またはloopはfalseがデフォルトなのでオプション自体を削除してみてください。

effect: "fade",
fadeEffect: {
  crossFade: true
},
loop: false,
POINT
Swiperでfadeにするときは、fadeEffect: { crossFade: true }も忘れず設定する!

まとめ

Swiperの使い方を紹介しました。

Swiperが動かないときは以下のことを確認してみてください。

  • JavaScript、CSSファイルが読み込めているか
  • 相対パスなら、パスの記述ミスがないか
  • 絶対パスなら、http、httpsが間違っていないか
  • JavaScriptのオプションの書き方が読み込んでいるSwiperのバージョンとあっているか

SwiperはjQuery不要でオプションもたくさん使える高機能なスライダープラグインです。
Web制作では今後も使う機会の多いプラグインになると思います。

Web制作を効率化したい!よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選

Web制作を効率化したいですか?この記事では、Web制作でよく使うスライダー、スクロールエフェクト、モーダルウィンドウ、郵便番号から住所を自動入力などに便利なJavaScript、jQueryのプラグイン、ライブラリを紹介しています。ぜひご覧ください。