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

まず､ファイルをダウンロードするか､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>

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つの要素は不要であれば書かなくても大丈夫です｡

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',
  },
})

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

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

個人的には､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以降については注意してください｡

POINT

Swiperが動かないときはバージョンを確認する！

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

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

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

スライドの画像を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 }も忘れず設定する！