swiper (v4.5.3) 使ってみたオプションまとめ

11 min readFeb 29, 2020

スライダー系のjsプラグインで有名な「Swiper」使ってみて実際に自分が使ったオプションを記録として残したいと思います。

ver5～はIE非対応
jQuery非依存
豊富なオプションが用意されているため、大体のことはswiperで出来る

基本のHTML

<!-- Slider main container -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
</div>

基本のjs

<script>
  var mainSlide = new Swiper ('.swiper-container', {
    // ここにオプションを追加していく
    spaceBetween: 10,
    loop: true,
    speed: 700,
  })
</script>

サムネイル付きのスライダー

①サムネイル用のスライダーとメインのスライダー、2つをHTMLに用意する

②それぞれswiperで何枚表示するかなどの設定を普通に行う

③メインのスライダーのほうに thumbs: {swiper: サムネイルのスライド名}を設定すればOK

// サムネイル用のスライダーを設定
  var thumbSlide = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 3,
      freeMode: true,
    });
  // メインのスライダーを設定
  var mainSlide = new Swiper('.main-slider', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  thumbs: {
    swiper: thumbSlide
  }});

サムネイルとメインスライド両方を連動させる

// サムネイル用のスライダーの設定
　var thumbSlide = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    slidesPerView: 3,
  });
　// メインのスライダーの設定
  var mainSlide = new Swiper('.main-slide', {
    spaceBetween: 0,
    slidesPerView: 1,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
　// jQueryのonを使用して、サムネイルがクリックされた時メインのスライドが移動するよう設定
  $('.gallery-thumbs').on('click', '.swiper-slide', function() {
    // クリックされたサムネイルの順番を取得
    let slideIndex = $('.gallery-thumbs-3 .swiper-slide').index(this);
    // 引数に指定したスライドに移動させる slideTo というメソッドを使って移動させる。loopの設定をしている場合は slideToLoop を使う
    mainSlide.slideToLoop(slideIndex);
  });  // メインのスライドが動いた時にサムネイルも連動させる
  // スライドが変わった時にイベントが発生する slideChange というAPIを使う
  mainSlide.on('slideChange', () => {
    // realIndex は現在activeになっているスライドの番号が入っている
    thumbSlide.slideToLoop(mainSlide.realIndex);
  });  // サムネイルをスライドした時にメインスライドを連動させる(上記と同じ)
  thumbSlide.on('slideChange', () => {
    mainSlide.slideToLoop(thumbSlide.realIndex);
  });

ページネーションクリック後の自動再生の動作について

自動再生あり、ページネーションあり、ページネーションをクリックしてスライド移動可能というスライドを作成したのですが、ページネーションをクリックした後に自動再生が再開されません。以下のオプションで解消できました。

disableOnInteraction: false,

ちなみにautoplayのオプションなので、実際には

autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },

というように書きます。

disableOnInteractionはユーザーがスライダーを操作したあと、自動再生が止まるかどうかを指定できます。デフォルトだとtrue、falseだと止まらなくなります。なのでページネーション以外にもナビゲーションボタンを押した際にも適用されます。autoPlayを設定する際はこちらの設定も常にしてしまっていいのではないでしょうか。

スマホでのスワイプを無効にしたい

allowTouchMove: true

スマホでのスワイプを可能にするかどうか。PCでのドラッグ操作も対象。falseだとナビゲーションやサムネイルクリックでしかスライドできなくなる。

ページネーションのカスタマイズ

pagination: {
    // ページネーションのコンテナとなるclassを指定
    el: '.p-header__slide-pagination',
    type: 'bullets',
    // ページネーションを構成するタグを指定(span以外にしたいなら)
    bulletElement: 'div',
    clickable: true,
    // カスタムしたいページネーションのHTMLを指定
    renderBullet: function (index, className) {
      return '<div class="p-header_slide_pagination ' + className + '"><div class="p-header_slide_pagination__circle"></div><div class="p-header_slide_pagination__progress"><div class="p-header_slide_pagination__box"><div class="p-header_slide_pagination__box-inner"></div></div><div class="p-header_slide_pagination__box"><div class="p-header_slide_pagination__box-inner"></div></div></div></div>';
    }
  },

bulletElementを指定しないとrenderBulletでカスタムしたHTMLを指定しても初期値のspanでHTMLが出力されてしまうため注意。

breakpointsを使わずにスマホとPCでの表示を変えたい

slidesPerView など一部のオプションは breakpoints でレスポンシブ対応ができるものの、 effect などをスマホ / PCで変えたい場合。

まず、PCかどうかを判定するフラグを立てます。

let winWidth = window.innerWidth;
let breakpoint = 900; // 900px以上でPCレイアウト
let pcFlg;if(winWidth >= 900) {
  pcFlg = true;
} else {
  pcFlg = false;
}

次に、PCの見た目でswiperを設定。今回はPCでは effect を fade に、SPでは effect を slide に変更したいと思います。

let sampleSlide; // どこからでも呼び出せるようにグローバル変数にしておく
let sampleSlideOption;
function slideFunc() {
  sampleSlideOption = {
    speed: 800,
    effect: 'fade',
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 6000,
      disableOnInteraction: false,
    },
  };
  sampleSlide = new Swiper('.swiper-container', sampleSlideOption);
};

SPで変更したい設定部分の記述を追加

if(! pcFlg) {
    sampleSlideOption.effect = 'slide';
  }

追加した記述が以下

let sampleSlide; // どこからでも呼び出せるようにグローバル変数にしておく
let sampleSlideOption;
function slideFunc() {
  sampleSlideOption = {
    speed: 800,
    effect: 'fade',
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 6000,
      disableOnInteraction: false,
    },
  };
  if(! pcFlg) {
    sampleSlideOption.effect = 'slide'; // ここに追加されました！
  }
  sampleSlide = new Swiper('.swiper-container', sampleSlideOption);
};

ロード時にイベントを発火

$(window).on('load', function () {
  // スライドが2枚以上あった場合swiperを起動
  if($('.swiper-slide').length >= 2) {
    slideFunc();
  }
});

まずはこれでスライダーが起動したと思います。

次ですが、ロード後ウィンドウ幅が変わった際も SP / PC のどっちかの検知をし、常にupdateされるようにします。ここに一番つまづきました。。

まずはコードを下記に書いてしまします。

$(window).on('resize', function () {
  if(sampleSlide !== undefined) {
    // スライダーを破棄
    sampleSlide.destroy(true,true);
    if(pcFlg) {
      sampleSlideOption.effect = 'fade';
      // swiperのoptionを上書き
    } else {
      sampleSlideOption.effect = 'slide';
      // swiperのoptionを上書き
    }
    // swiperを起動
    sampleSlide = new Swiper('.swiper-container', sampleSlideOption);
  }
});

やっていることとしては、ウィンドウの幅や高さが変わるたび、 sampleSlide.destroy(true,true)し、 PCなのかSPなのかによってオプションの値を上書きし、そのオプションを引数に設定しswiperを再起動させています。

ウィンドウ幅が短期間で連続的に変化すると、そのたびに swiperが削除→起動というのを繰り返しているので負荷は重くなりそうな気がしています。。

しかし、update()メソッドでは中途半端にしか updateされないので、今回の場合はdestroyするしかないのかなと思いました。

もしもっとほかにいいやり方があるよ！という方は教えていただけますと大変うれしく思います。