Swiperを使ってスライダーをつくる


## はじめに
スライダーを作りたい！ということで、今回Swiperを使って実装しました。
基本の書き方と応用したものを、備忘録としてまとめています。

## Swiperとは？

jQueryを使わず、スライダーが作れるJavaScriptのライブラリです。
ただし、バージョン5以降はIE対象外のため、IE対応させるにはバージョン4を使う必要があります。

## Swiperを使うには

GitHubからファイルをダウンロード、もしくはCDNを読み込む

https://cdnjs.com/libraries/Swiper

今回こちらのサイトからCDNで読み込んで使用しました。

## 基本の記述

### HTML
```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 class="swiper-scrollbar"></div>
</div>
```

### CSS
サイズや見た目など設定する際は適宜追加します。

```css
.swiper-container {
    max-width: 1000px;
    margin: 0 auto;
}
.swiper-slide {
    text-align: center;
}
```



### JSでSwiperを初期化

変数swiperを初期化。
この時点でスライダーとしての形はできてる状態。

中身に使用するオプションを追加していく。（必要なオプション機能を適宜）

```javascript
const swiper = new Swiper('.swiper-container', {
  //↓追加していく
    
  // パラメーター
  direction: 'vertical',
  loop: true,

  // ページネーション
  pagination: {
    el: '.swiper-pagination',
  },

  // ナビゲーション
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // スクロールバー
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
```



### 基本的な実装

矢印をクリックしたらスライドするのみ

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abWBzJK" data-user="mgkita" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mgkita/pen/abWBzJK">
  Untitled</a> by chisato (<a href="https://codepen.io/mgkita">@mgkita</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

JSにパラメーターなどを追加することで色んな動きをつけることができます。

※「値」を記述する際はtrue・false、数字以外は`""`か`''`で囲う



例）

- `loop: true`：最後までいったら1枚目に戻ってループする

- `effect: 'fade'` ：スライドしたときにフェードしながら画像が切り替わる

- `slidesPerView: 任意の数字`：仮に3を指定すると、3枚横並びで表示される

など

↓公式より

https://swiperjs.com/swiper-api#initialize-swiper


## 応用ver
汎用的なスライダーを作成しました。
今回は実装してませんが、もっと見るをクリックすると画像一覧のようなページにとぶイメージのスライダーです。

![slider-min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075212/02d92a2a-719b-a18e-f6e7-8a4837cd6d92.gif)


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzrRwxG" data-user="mgkita" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mgkita/pen/YzrRwxG">
  Untitled</a> by chisato (<a href="https://codepen.io/mgkita">@mgkita</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


#### JS
```javascript
const mySwiper = new Swiper(".cat-slider", {
  spaceBetween: 50,
  width: 370,
  breakpoints: {
    767: {
      spaceBetween: 15,
      width: 290,
      slidesPerView: 1
    }
  },
  navigation: {
    nextEl: ".swiper-button-next--cat",
    prevEl: ".swiper-button-prev--cat"
  }
});
```

spaceBetween：画像と画像の幅を指定
width：画像自体の横幅を指定
breakpoints：767px以下の時のスタイルを指定
slidesPerView：横幅100%としたときに画像を何枚見せるか
navigation：両端の矢印を設置

JS部分はこれだけの記述で完成！

## まとめ
SwiperはJSを数行書くだけで動くものができてしまうので、手早くスライダーを作成したいときに便利です。
ただ複雑なレイアウトになると難しい部分もあったので、cssを使ったスライダーなどとうまく使い分けれるようにしていきたいと思いました。

### おまけ
今回使用した画像は、私の先輩のおうちのにゃんこちゃん達でした！
快く提供してくださり、スペシャルサンクスです！！

可愛すぎるので最後にもう一度貼っておきます。
皆さんもぜひ癒されてください。

![slider-min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1075212/02d92a2a-719b-a18e-f6e7-8a4837cd6d92.gif)