Swiperを使ってスライダーアニメーションを実装する〜ページネーションやナビゲーションのカスタマイズ編〜

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Swiperのページネーションやナビゲーションのカスタマイズの方法について

■ 関連記事
・[Swiperを使ってスライダーアニメーションを実装する〜導入編〜](https://qiita.com/s79ns/items/08a7775f47122acbdcff)
・[Swiperを使ってスライダーアニメーションを実装する〜使い方編〜](https://qiita.com/s79ns/items/dc35b526296351e93b3e)

## 色を変更

#### 白か黒に変更する

swiperで予め用意されている以下のクラス名を指定すると、ページネーションとナビゲーションの色を
白か黒に変えることができます。

```html
<!-- ページネーション -->
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-pagination swiper-pagination-black"></div>

<!-- 戻る矢印 -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-black"></div>

<!-- 進む矢印 -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-next swiper-button-black"></div>
```

#### 好きな色に変更する

検証にて`color`プロパティがどこに当てられているのかを確認します。

![スクリーンショット 2021-02-15 13.23.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/339c9a1b-630d-62d0-180d-1d1f8401744d.png)

```css
.swiper-button-next,
.swiper-button-prev {
  color: pink;
}
```

設定したい色に変更することができました。

![スクリーンショット 2021-02-15 13.32.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/3ab9f31f-b01b-a9e0-0a4d-64b759a050c3.png)


## 矢印を変更

まず、ナビゲーションがどう定義されているか検証を使って確認します。
`swiper-icons`という`font-family`が指定されていて、`content`に`next`と入力していると矢印が表示されています。

![スクリーンショット 2021-02-15 11.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/23d58f84-dc2d-ef9a-7edb-b22ca1a70b2b.png)

検証からセレクタをコピーして`font-family`の値を変更し、`font-weight: bold;`を指定します。
<font color="gray">※ `font-weight: bold;`を指定しないと表示されません。</font>

```css
.swiper-button-next::after,
.swiper-button-prev::after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
}
```

[Font Awesome](https://fontawesome.com/)に移動し、目的のアイコンを表示したら、以下の丸印の文字列をコピーします。

![スクリーンショット 2021-02-15 13.08.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/396a8272-4429-b6be-66f4-ae0751783646.png)

バックスラッシュを入力後、コピーした文字列を貼り付けます。

```css
  .swiper-button-next::after {
    content: "\f0a9";
  }
```

Font Awesomeを使えるように読み込みを行います。

```html
<head>
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet" />
</head>
```

Font Awesomeのアイコンを使ってナビゲーションバーを変更することができました。
左側のナビゲーションバーも同じ手順で変更することができます。

![スクリーンショット 2021-02-15 13.13.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/87dd9aec-b7a5-b447-4986-f1784ff03c04.png)

## アイコンの大きさを変更

#### ナビゲーションアイコンの大きさを変更する

疑似要素に`font-size`プロパティが指定されているので、アイコンの大きさを変更したい場合は
疑似要素に`font-size`プロパティを指定します。

![スクリーンショット 2021-02-15 13.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/6d1f96fd-00da-1eac-5038-e8ec7d6c0933.png)

```css
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 50px;
}
```

#### ページネーションの大きさを変更する

ページネーションの丸印の大きさを変えるには、`width`プロパティと`height`プロパティを変更します。

他に、`border-radius`プロパティを変えると形を四角に変更したり、上のセレクタの`margin`プロパティの横の値を変更すると、丸印の間隔を調整することができます。

![スクリーンショット 2021-02-15 14.20.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/d0a8d14c-1f05-d30e-47b0-b6fdc9c1452e.png)

```css
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
```