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/





```js
// 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等の追加モジュールをインポート、設定したのがこちら。

```js
// 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を使うためのオプションを記述する必要がある。（これも公式サイトに書かれている。）

```js
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',
  },

});
```


これで画像スライダーを実装できた。
<img width="1173" alt="スクリーンショット 2020-07-26 21.09.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680199/0109e2a7-358c-d7e5-6c25-676cb6a36cea.png">

## その他修正①　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/


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