レスポンシブ対応スライダー 「Swiper」

Swiper – Most Modern Mobile Touch Slider」の使い方メモ。

ナビゲーション・ページネーション付きスライド

デモ

コード

HTML
<div class="swiper-demo-1 swiper-container" id="swiper-demo-1">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+1" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+2" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+3" alt="">
    </div>
  </div>
  <div class="swiper-button-prev" id="swiper-demo-1-prev"></div>
  <div class="swiper-button-next" id="swiper-demo-1-next"></div>
  <div class="swiper-pagination" id="swiper-demo-1-pagination"></div>
</div>
CSS
.swiper-demo-1 {
  width: 240px;
  height: 180px;
}
JavaScript
new Swiper('#swiper-demo-1', {
  navigation: {
    prevEl: '#swiper-demo-1-prev',
    nextEl: '#swiper-demo-1-next'
  },
  pagination: {
    el: '#swiper-demo-1-pagination',
    clickable: true
  },
  loop: true
});


連動する2つのスライダ

デモ

水平スライダ


垂直スライダ

コード

HTML
<h5>水平スライダ</h5>

<div class="swiper-demo-2-horizontal swiper-container" id="swiper-demo-2-horizontal">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+1" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+2" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+3" alt="">
    </div>
  </div>
</div>

<div class="swiper-demo-2-nav">
  <button id="swiper-demo-2-prev">PREV</button>
  <button id="swiper-demo-2-next">NEXT</button>
</div>

<h5>垂直スライダ</h5>

<div class="swiper-demo-2-vertical swiper-container" id="swiper-demo-2-vertical">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+1" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+2" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+3" alt="">
    </div>
  </div>
</div>
CSS
.swiper-demo-2-horizontal,
.swiper-demo-2-vertical {
  width: 240px;
  height: 180px;
}
JavaScript
const demo2h = new Swiper('#swiper-demo-2-horizontal', {
  navigation: {
    prevEl: '#swiper-demo-2-prev',
    nextEl: '#swiper-demo-2-next'
  },
  loop: true
});
const demo2v = new Swiper('#swiper-demo-2-vertical', {
  direction: 'vertical',
  loop: true
});
demo2h.controller.control = demo2v;
demo2v.controller.control = demo2h;


カルーセルスライダ

コード

HTML
<div class="swiper-demo-3-container">
  <div class="swiper-demo-3 swiper-container" id="swiper-demo-3">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/240x180?text=Sample+Image+1" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/240x180?text=Sample+Image+2" alt="">
      </div>
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/240x180?text=Sample+Image+3" alt="">
      </div>
    </div>
  </div>
</div>
CSS
.swiper-demo-3-container {
  overflow: hidden;
}
.swiper-demo-3-container .swiper-container {
  overflow: visible;
  width: 240px;
  margin: 0 auto;
}
.swiper-demo-3-container .swiper-slide {
  max-width: 240px;
}
.swiper-demo-3-container .swiper-slide img {
  pointer-events: none;
  user-select: none;
}
.swiper-demo-3-container .swiper-wrapper {
  transition-timing-function: linear;
}
JavaScript
new Swiper('#swiper-demo-3', {
  slidesPerView: 1,
  loopAdditionalSlides: 3,
  centeredSlides: true,
  allowTouchMove: false,
  speed: 5000,
  autoplay: {
    delay: 0
  },
  loop: true
});


カルーセル連動スライダ

デモ

コード

HTML
<div class="swiper-demo-4 swiper-container" id="swiper-demo-4">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+1" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+2" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/240x180?text=Sample+Image+3" alt="">
    </div>
  </div>
  <div class="swiper-button-prev" id="swiper-demo-4-prev"></div>
  <div class="swiper-button-next" id="swiper-demo-4-next"></div>
</div>

<div class="swiper-demo-4-caroucel swiper-container" id="swiper-demo-4-caroucel">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/120x50?text=Sample+Image+1" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/120x50?text=Sample+Image+2" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://via.placeholder.com/120x50?text=Sample+Image+3" alt="">
    </div>
  </div>
</div>
CSS
.swiper-demo-4 {
  width: 240px;
  height: 180px;
}
.swiper-demo-4-caroucel {
  width: 240px;
  margin: 10px auto 0;
}
.swiper-demo-4-caroucel .swiper-slide {
  max-width: 120px;
  cursor: pointer;
}
JavaScript
const demo4 = new Swiper('#swiper-demo-4', {
  initialSlide: 1,
  navigation: {
    prevEl: '#swiper-demo-4-prev',
    nextEl: '#swiper-demo-4-next'
  },
  loop: false
});
const demo4c = new Swiper('#swiper-demo-4-caroucel', {
  initialSlide: 1,
  slidesPerView: 'auto',
  spaceBetween: 20,
  centeredSlides: true,
  slideToClickedSlide: true,
  loop: false
});
demo4.controller.control = demo4c;
demo4c.controller.control = demo4;

npm でのインストール

$ npm install -D swiper

ES module でバンドル (with webpack)

ES module を使って import してバンドルする場合 node_modules 以下のスクリプトを babel を通す必要がある。

webpack.config.js

// ... 省略 ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      },
// ... 省略 ...

css や画像アセットをバンドルする場合以下の設定を追加する。

webpack.config.js

// ...省略...
  module: {
    rules: [
      {
        test: /node_modules\/(.+)\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /node_modules\/(.+)\.(jpe?g|png|gif|svg|ico)(\?.+)?$/,
        use: [
          {
            loader: 'url-loader'
          }
        ]
      }
// ...省略...

css のインポートでは Minify された swiper.min.css を読み込む。
※ トランスパイルされたコードが IE でエラーを吐くため。

import '../../node_modules/swiper/dist/css/swiper.min.css';
import Swiper from 'swiper';
new Swiper('.swiper-container', { /* ... */ });

v4.0.0 でトランスパイルしたコードが IE11 でエラーを吐くようになったので、UMD バージョン(swiper/dist/js/swiper.js)をインポートする。

// Syntax error on webpack build JS with IE11, by import swiper v4.x.x es modules.
// Fix to import UMD version.
// https://github.com/nolimits4web/Swiper/issues/2237
import Swiper from 'swiper/dist/js/swiper.js';

参考サイト

«