Swiper.jsをnpmでインストールして使ってみる。

現在勉強のために作っているWEBサービス（Laravel使用）に画像スライダーを実装したく、Swiper.jsというものが便利らしいので使ってみる。npmでインストールし、ググって良さそうなコードをコピペしてみるが、上手くいかない。

（僕の環境では）上手くいかなかったコード

index.blade.php

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="{{ asset('image/001.jpg') }}></div>
      <div class="swiper-slide"><img src="{{ asset('image/002.jpg') }}></div>
      <div class="swiper-slide"><img src="{{ asset('image/003.jpg') }}"></div>
    </div>

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

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

index.js

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

画像自体は表示されるのだが、>や<のボタンが表示されない。
英語なので気が進まないが、公式サイトを確認すると、使い方がわかりやすく説明されていた。
https://swiperjs.com/get-started/

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';

const swiper = new Swiper(...);

By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:

デフォルトでは、Navigation、Paginationのような追加のモジュールはエクスポートされない。必要ならインポートと設定をしてください。とのこと
（僕の場合、Swiperのインポートすらできていなかった。さらに、swiper/swiper-bundle.cssもインポートしておく必要があるようだ。これをインポートしておかないと、cssが効かず画面が崩れる。)

Navigation等の追加モジュールをインポート、設定したのがこちら。

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

さらに、new Swiper(...);の部分に、NavigationやPaginationを使うためのオプションを記述する必要がある。（これも公式サイトに書かれている。）

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})

最初のindex.jsと比べてみると、オプションの書き方が少し違うようだ。

修正したコード

最終的なコードは以下。

index.blade.php

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="{{ asset('image/ginzan.jpg') }}"></div>
            <div class="swiper-slide"><img src="{{ asset('image/kapibara.jpg') }}"></div>
            <div class="swiper-slide"><img src="{{ asset('image/yamanaka.jpg') }}"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

index.js

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

import 'swiper/swiper-bundle.css';

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

});

これで画像スライダーを実装できた。

その他修正①　swiper-bundle.css

ただ、デフォルトではnavigation, paginationのアイコンが青色なのが気になる。
これは先ほどindex.jsで読み込んだ node_modules/swiper/swiper-bundle.cssを修正することで解決する。

swiper-bundle.css

:root {
  --swiper-theme-color: #007aff; 　/* rgba(255, 255, 255, .6)に変更 */
}
.swiper-container {
  height: 700px;　　/* 追加 */
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

開発ツールで確認したところ、:rootで基本の色が設定されているようだったのでそこを修正、ついでに画像の高さも変えておいた。

その他修正②　Autoplay　

時間経過で勝手に画像がスライドするようにしたかったので、Autoplayモジュール(?)も追記する。

index.js

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination ,Autoplay} from 'swiper';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination, Autoplay]);

import 'swiper/swiper-bundle.css';

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  loop: true,
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  speed: 1000

});

その他追加モジュールは、公式サイトにずらりと載っている。
https://swiperjs.com/demos/

今回の教訓

英語の情報も好き嫌いせずどんどん取っていくべき。