【脱jQuery】jqueryレスの高機能スライダー”swiper”をwebpackで使う方法。複数設置例も。

2019/06/11

2019/06/18

技術系

こんにちは、上間ウェブ店の上間です。

今回はこれ以外考えられなくなったスライダーの紹介です。jquery時代はbxSliderばっかり使ってましたが、もう使い方忘れてしまいました。

Swiper – Most Modern Mobile Touch Slider
Swiper – is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

タイトルの通りjquery要らずで、オプションやコールバックが豊富なのでこればっかり使ってます。

teratailで同じページに複数設置する方法が上手くいかないって質問が多かったので、そこも含めて記事にしてみました。

シンプルな使い方

僕はnpm(yarn)とwebpackの開発環境なのでそちらの紹介です。

まずはダウンロードしてきます。devDependenciesではなくdependenciesに入れます。

yarn add 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>

スワイパーのファイル作ってコード書いていきます。webpack使ってるので、jsとcssを同じファイルで読み込みます。

cssのファイルですが、このようにnode_modulesからのパスを書かないとエラー出たりするので要注意です。

// swiper.js

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css' // cssを読み込む

const options = {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
}
const mySwiper = () => {
  new Swiper ('.swiper-container', options)
}
export default mySwiper

// index.js

import swiper from './swiper.js'

swiper()

シンプルな使い方は以上です。すごく簡単じゃないですか？

もっといろんな使い方を見てみたい場合は、公式サイトのデモページとこちらのサイトがわかりやすくて良かったのでそちらからご覧ください。

【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介

webpackでminifyするとエラーが出る場合

webpackでswiperを使おうとして出たエラーは、上記のcss読み込みのパスと、下記のエラーくらいでした。エラー出た場合は試してみてください。

webpackerでswiperを利用する際に Unexpected token: name (Dom7) と出た場合の対処法
https://qiita.com/mah_lab/items/5bcd0edc0a68f882a2a7

複数設置する場合

テラテイルで多かった上手くいかないパターンがが、クラス名をそのまま連番で複製するってやつでした。

swiper-container2 とか書いちゃうやつです。

<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>

<div class="swiper-container2">
  <div class="swiper-wrapper2">
    <div class="swiper-slide2">Slide 1</div>
    <div class="swiper-slide2">Slide 2</div>
    <div class="swiper-slide2">Slide 3</div>
  </div>
  <div class="swiper-pagination2"></div>
  <div class="swiper-button-prev2"></div>
  <div class="swiper-button-next2"></div>
</div>

これだと付属しているcssが効かなくなり、1つ目は上手くいくけど2つ目がーってなります。

複数設置する場合のコツはマルチクラスです。デフォルトのスタイルを保ったまま、追加・上書きしていくイメージです。実際にコード書いてみます。

<div class="swiper-container swiper-1">
  <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>

<div class="swiper-container swiper-2">
  <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>

swiper-containerにクラスを追加しただけですね。これだけでいいんです。

js側も、追加したマルチクラスの方で発火させます。

swiper-1とswiper-2でファイルを分けてもいいんですが、ファイルが増えすぎても管理が面倒なので、まとめて書いてしまおうと思います。

// swiper.js

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css' // cssを読み込む

const options1 = {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
}

const options2 = {
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
}

const swiper = () => {
  const swipe1 = new Swiper('.swiper-1', options1)
  const swipe2 = new Swiper('.swiper-2', options2)
}
export default swiper

以上になります。