Swiperを使用してスライダーを実装するコードサンプル

今回はjQueryを使ってスライダーを簡単に作ることができるプラグイン「Swiper」を使ったサンプルコードを紹介します。

基本的なスライダーから、応用して高機能なスライダーを作ることもできます。

Swiperは公式サイトからダウンロードして先に読み込んでおいてください。

 

基本的な画像スライダー

Swiperを使った最も基本的なスライダーです。

画像を横幅いっぱいに表示し、右左の矢印をクリックすることで次の画像にスワイプします。

下にはメニューボタンもついているので画像が何枚あるかも把握できます。

 

HTML

<div class="sample sample01">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
    </div>

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

 

CSS

.c-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  padding: 0 15px;
}

 

CSSではスライダーの幅を調整しているだけです。

Swiper用のCSSみたいなものはありません。

 

jQuery

window.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('.sample01 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true
  });
}, false);

 

オプションは以下のようなものを指定しています。

何もオプションを指定しないと本当に最低限の機能しか付かないので、少しでもそれっぽく見せるためにいくつかつけておくといいでしょう。

  • pagenation:スライダーの下にあるメニュー(ページネーション)を表示します。追加するにはHTMLに要素を追加し、CSSでスタイルを整える必要があります。
  • paginationClickable:ページネーションをクリックするとスライダーが動作するようにするオプションです。pagenationを指定していないと効果がありません。
  • nextButton:次のボタンを表示します。CSSで.swiper-button-nextクラスを指定すれば表示することができます。
  • prevButton:前のボタンを表示します。CSSで.swiper-button-prevクラスを指定すれば表示することができます。
  • loop:最後のスライドで次のボタンをクリックした際に最初の画像へ戻るかを指定します。

 

画像以外をスライダーで表示する

Swiperは画像だけでなく、テキストや動画など様々なものをスライドさせることができます。

HTML

<div class="sample sample02">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br class="u-d-n u-d-i-md">うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</p>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>では、わたくしはいつかの小さなみだしをつけながら、<br class="u-d-n u-d-i-md">しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
        </div>
      </div>
    </div>
      
    <div class="swiper-button-prev">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
        <path class="c-arrow c-arrow-prev" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" />
      </svg>
    </div>
    <div class="swiper-button-next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
        <path class="c-arrow c-arrow-next" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" />
      </svg>
    </div>

    <div class="swiper-pagination"></div>
  </div>
</div>

 

CSS

.sample02 .swiper-wrapper {
  align-items: stretch;
}

.sample02 .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-bottom: 25px;
}

.sample02 .sample02-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.sample02 .swiper-button-prev,
.sample02 .swiper-button-next {
  display: none;
  width: 20px;
  height: 32.58px;
  fill: #666;
  stroke: none;
  stroke-width: 0;
  background-image: none;
  z-index: 10000;
}

.sample02 .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}

.sample02 .swiper-pagination-bullet-active {
  background: #666;
}

@media (min-width: 768px) {
  .sample02 .swiper-slide {
    padding: 50px;
  }

  .sample02 .swiper-button-prev,
  .sample02 .swiper-button-next {
    display: block;
  }

  .sample02 .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 10px;
  }
}

 

jQuery

window.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('.sample02 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    speed: 1000,
    autoplay: 3000,
    spaceBetween: 10,
    effect: 'coverflow'
  });
}, false);

 

今回は矢印は表示せずに自動で切り替わるようにしています。

今回もオプションをいくつかつけているので解説します。

  • speed:スライドが切り替わる秒数です。ミリ秒単位で指定します。
  • autoplay:自動でスライドが切り替わるようにします。切り替わる時間は値をミリ秒単位で指定してください。
  • spaceBetween:スライド間の隙間を指定することができます。px単位で指定しましょう。
  • effect:スライドにかけるエフェクトを指定することができます。指定できるのは「slide」「fade」「cube」「coverflow」「flip」の5つです。

 

3カラムのカルーセル

画像が3つ表示されるカルーセルです。

レスポンシブ対応で、PCでは3カラム、スマホでは1カラムに左右の画像が半分表示されるようになっています。

HTML

<div class="sample sample03">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </div>
</div>

 

CSS

.swiper-slide {
  cursor: pointer;
}

.sample03 .swiper-button-prev,
.sample03 .swiper-button-next {
  display: none;
}

@media (min-width: 768px) {
  .sample03 .swiper-button-prev,
  .sample03 .swiper-button-next {
    display: block;
  }
}

 

jQuery

window.addEventListener('DOMContentLoaded', function() {
  var swiper03 = new Swiper('.sample03 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    slidesPerView: 3,
    centeredSlides : true,
    slideToClickedSlide: true,
    spaceBetween: 10,
    breakpoints: {
      543: {
        slidesPerView: 2
      }
    }
  });
}, false);

 

オプションは以下の通りです。

  • slidesPerView:1画面で見えるスライド数を指定できます。今回は3なので3カラムになります。
  • centerdSlides;アクティブになったスライドを画面中央に表示するように指定します。
  • slideToClickSlide:スライド画像をクリックした時にその画像をアクティブにするかどうかを指定できます。画面に複数の画像が表示されていないと効果がありません。
  • breakpoints:ブレークポイントを指定します。画面幅が指定した値以下のサイズになるときの挙動を同時に指定することができます。

 

クリックでアニメーションするスライダー

クリックしてスライドする時に合わせてアニメーションを指定する場合はCallback関数を使用して実装することができます。

HTML

<div class="sample sample04">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p class="catch01">わたくしといふ現象は</p>
      </div>
      <div class="swiper-slide">
        <p class="catch02">仮定された有機交流電燈の</p>
      </div>
      <div class="swiper-slide">
        <p class="catch03">ひとつの青い照明です</p>
      </div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </div>
</div>

 

CSS

.sample04 .swiper-slide {
  cursor: pointer;
}

.sample04 .swiper-slide {
  height: 200px;
  display: flex;
  justify-content: center;
}

.sample04 .swiper-slide p {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
}

.sample04 .swiper-slide .is-anim {
  transition: .6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: translateY(0px);
}

.sample04 .swiper-button-prev,
.sample04 .swiper-button-next {
  display: none;
}

@media (min-width: 768px) {
  .sample04 .swiper-button-prev,
  .sample04 .swiper-button-next {
    display: block;
  }
}

 

jQuery

var swiper04Anim = function() {
  var el = document.querySelector('.sample04 .swiper-slide-active p');
  var anim = document.querySelectorAll('.is-anim');

  for (var i = 0; i < anim.length; i++ ) {
    anim[i].classList.remove('is-anim');
  }
  el.classList.add('is-anim');
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper04 = new Swiper('.sample04 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    onInit: function() {
      swiper04Anim();
    },
    onSlideChangeEnd: function() {
      swiper04Anim();
    }
  });
}, false);

 

CSSでtransitionとtransformを指定しておきます。

jQueryでアニメーションを実行するためにis-aimクラスを追加・削除するswiper04Anim関数を作成します。

この関数をコールバックで呼び出すことでSwiperのスライドとタイミングを合わせています。

オプションは以下の通り。

  • onInit:コールバックを指定します。スライダーの設定が終わった後に指定しましょう。
  • onSlideChangeEnd:スライダーが変わった変わった後のタイミングでの処理を記述できます。

 

PCでは2カラム、スマホではカルーセルに変化するスライダー

PCの表示では2×2の静的レイアウトにしていますが、スマホ表示ではカルーセルで表示するスライダーです。

2×2のレイアウトだとスマホでは小さく表示されてしまうので、Swiperをうまく使って操作性をあげるとともに場所を取らないようにしています。

HTML

<div class="sample sample05">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
      <div class="swiper-slide"><img src="./img/img04.png"></div>
    </div>
      
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </div>
</div>

 

CSS

@media (min-width: 920px) {
  .sample05 .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .sample05 .swiper-slide {
    width: 50%;
    padding: 10px;
  }
  .sample05 .swiper-button-prev,
  .sample05 .swiper-button-next,
  .sample05 .swiper-pagination {
    display: none;
  }
}

jQuery

最初にブラウザの横幅を取得する関数を作成します。

 var scaleWindowW = function() {
  var w = (window.innerWidth || document.documentElement.clientWidth || 0);
  return w;
};

 

次にSwiperが用意しているdestroy()メソッドを使用してSwiperの処理を停止します。

今回は920px未満はSwiperが動作するようにし、920px以上はSwiperを停止します。

window.addEventListener('DOMContentLoaded', function() {
  var swiper05 = undefined;
  var swiperEl = document.querySelector('.sample05 .swiper-container');

  if (scaleWindowW() < 920 && swiper05 == undefined) { 
    swiper05 = new Swiper(swiperEl, {
      pagination: '.swiper-pagination', 
      nextButton: '.swiper-button-next', 
      prevButton: '.swiper-button-prev', 
      loop: true, 
      slidesPerView: 2, 
      centeredSlides : true 
    }); 
  } else if (scaleWindowW() >= 920 && swiper05 != undefined) {
    swiper05.destroy();
    swiper05 = undefined;
    // 処理...
  }
}, false);

 

Swiperの処理を停止してもHTMLに直接追加されたCSSスタイルが消えないため、920px未満で変数swiper05がundefinedの場合はCSSを削除するようにします。

// 処理...
var swiperWrapper = document.getElementsByClassName('swiper-wrapper');
var swiperSlide = document.getElementsByClassName('swiper-slide');

// 処理...
} else if (scaleWindowW() >= 920 && swiper05 != undefined) {
  swiper05.destroy();
  swiper05 = undefined;
  for ( var i = 0; i < swiperWrapper.length; i++ ) {
    swiperWrapper[i].removeAttribute('style');
  }
  for ( var i =0; i < swiperSlide.length; i++ ) {
    swiperSlide[i].removeAttribute('style');
  }
}
// 処理...

 

ブラウザのサイズが変わった時にも対応できるように、サイズが変わるたびにinitSwiper()を実行します。

jQueryのコードを全体をまとめると以下のようになります。

var scaleWindowW = function() {
  var w = (window.innerWidth || document.documentElement.clientWidth || 0);
  return w;
};

window.addEventListener('DOMContentLoaded', function() {
  var swiper05 = undefined;
  var swiperEl = document.querySelector('.sample05 .swiper-container');
  var swiperWrapper = document.getElementsByClassName('swiper-wrapper');
  var swiperSlide = document.getElementsByClassName('swiper-slide');

  var initSwiper = function() {
    if (scaleWindowW() < 920 && swiper05 == undefined) { 
      swiper05 = new Swiper(swiperEl, {
      pagination: '.swiper-pagination', 
      nextButton: '.swiper-button-next', 
      prevButton: '.swiper-button-prev', 
      loop: true, 
      slidesPerView: 2, 
      centeredSlides : true }); 
    } else if (scaleWindowW() >= 920 && swiper05 != undefined) {
      swiper05.destroy();
      swiper05 = undefined;
      for ( var i = 0; i < swiperWrapper.length; i++ ) {
        swiperWrapper[i].removeAttribute('style');
      }
      for ( var i =0; i < swiperSlide.length; i++ ) {
        swiperSlide[i].removeAttribute('style');
      }
    }
  }
  initSwiper();

  window.addEventListener('resize',initSwiper);
}, false);

 

メインのスライダーの下の小さなスライダーを設置する

メインのスライダーをの矢印に連動して下の小さなスライダーもスライドするようにします。

また、下のスライダーをクリックしてもメインのスライダーが連動してスライドするようにします。

この場合は.swiper-containerを2つ用意する必要があります。

HTML

<div class="sample sample06">
  <div class="swiper-container main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
      <div class="swiper-slide"><img src="./img/img04.png"></div>
    </div>
    
    <div class="swiper-pagination"></div>

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

  <div class="swiper-container thumbnail">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/img01.png"></div>
      <div class="swiper-slide"><img src="./img/img02.png"></div>
      <div class="swiper-slide"><img src="./img/img03.png"></div>
      <div class="swiper-slide"><img src="./img/img04.png"></div>
    </div>
  </div>
</div>

 

CSS

.sample06 .thumbnail .swiper-wrapperにmargin-left: calc(-37.5% – 5px);と指定していますが、これはメインのスライダーのサムネイルを左に寄せるためのスタイルです。

サムネイルを中央に表示したままにしたい場合はスタイルを削除すればokです。

 .sample06 .main {
  margin-bottom: 10px;
}

.sample06 .thumbnail .swiper-slide {
  cursor: pointer;
  opacity: .7;
}

.sample06 .thumbnail .swiper-slide-active {
  opacity: 1;
}

.sample06 .thumbnail .swiper-wrapper {
  margin-left: calc(-37.5% - 5px);
}

 

jQuery

スライダーが2つあるのでインスタンスも2つ作成しましょう。

swiper06Main.params.control = swiper06Thumb;
swiper06Thumb.params.control = swiper06Main;

 

処理は以下のようになります。

window.addEventListener('DOMContentLoaded', function() {
  var swiper06Main = new Swiper ('.sample06 .main', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 10,
  })

  var swiper06Thumb = new Swiper('.sample06 .thumbnail', {
    spaceBetween: 10,
    centeredSlides: true,
    slidesPerView: 4,
    slideToClickedSlide: true
  });
  swiper06Main.params.control = swiper06Thumb;
  swiper06Thumb.params.control = swiper06Main;
}, false);

 

オプションで指定しているcontrolはSwiperのインスタンスを連動させるためのオプションです。

 

まとめ

Swiperを使ったスライダーのサンプルをいくつか紹介しました。

オプションやレイアウトによってはまだまだ色々なスライダーを作ることができると思うので、自分なりに色々試してみると面白いと思います。