レスポンシブ対応スライダー「Swiper」 : Serendip – Webデザイン・プログラミング

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

2019年02月04日

blog

javascript

「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 'swiper/css/swiper.min.css';
import Swiper from 'swiper';
new Swiper('.swiper-container', { /* ... */ });

v4.0.0 でトランスパイルしたコードが IE11 でエラーを吐くようになったので、UMD バージョン(swiper/dist/js/swiper.min.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/js/swiper.min.js';

ES module でバンドル (v6.0.0)

Swiper v6.0.0 で sideEffects に false が設定されたために style-loader での swiper/swiper-bundle.css のインポートが development モードでは正常に行えるのに、production モードでは読み込んだ CSS が削除されてしまって、スライダの表示が崩れるようになってしまった。

webpack.config.js で CSS の読み込みで sideEffects を trur に設定すると production モードでも正常にインポートできるようになった。

Swiper v6.0.0 での webpack.config.js 設定は以下のとおり。

// ...省略...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /node_modules\/(.+)\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: IS_DEVS,
            },
          },
        ],
        sideEffects: true,
      },
// ...省略...

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

Serendip

Web Studio