2021.12 Swiperのナビゲーションの色を変える

<img src="https://1.bp.blogspot.com/-Ecy2AJ9Je08/V_4cYKcxnPI/AAAAAAAA-zU/KaiC7Qa-eXQB_MzAFjJJGOpN6qUgXGSMACLcB/s400/kujira_zasyou.png">

## はじめに
ご存知Swiper。
スライダーを簡単に実装できるJavaScriptライブラリーですが
ナビゲーションの色を変えたいと思い、いろんな記事を試したのですが何故かうまくいかず。。。

ちょっとやりかたが変わったかもということでまとめます。

## サンプルのスライド
今回はこちらを例に説明していきます。

<p class="codepen" data-height="399" data-default-tab="result" data-slug-hash="jOGbPdG" data-user="rm5912" style="height: 399px; 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/rm5912/pen/jOGbPdG">
  Swiper-lesson1</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## swiper-button-blackで変わらない！！
swiperのナビゲーションの色はデフォルトで青ですが、あまりこの色のまま使うことはないように思います。
swiperでは色を黒にしたり、白にしたりはすでに準備されているので、それを記述すれば変わる！という認識でいました。しかし、試したけど変わらず。。。白にしたいのに。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111652/700264a8-9609-0247-399d-f5881e450986.png)

<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="PoJPqgz" data-user="rm5912" style="height: 400px; 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/rm5912/pen/PoJPqgz">
  Swiper-lesson1</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



```html:HTML
<!-- 前ページボタン -->
<div class="swiper-button-prev swiper-button-black"></div>

<!-- 次ページボタン -->
<div class="swiper-button-next swiper-button-black"></div>
```

## ナビゲーションボタンのサイズが変わらない！！
とりあえずサイズを変えるか〜と、widthとheightを書いてサイズを変えようとすると
あれ、変わってないし！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111652/3f35683b-2083-8c4f-465f-4ddd9cd2c163.png)

<p class="codepen" data-height="401" data-default-tab="html,result" data-slug-hash="OJxyVYb" data-user="rm5912" style="height: 401px; 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/rm5912/pen/OJxyVYb">
  Swiper-lesson1</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```css:CSS
.swiper-button-prev::after,
.swiper-button-next::after {
     width: 20px;
     height: 20px;
 }
```


## あれbackground-image: noneで消えない！！
じゃあ、もう違うのにしようとbackground-image:none;で非表示にして、擬似要素でbackground-imageを入れるやり方を試そうとすると、
あれ、background-image:none;で消えなくね？
!importantをつけても変わらず・・・。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111652/decd3b66-d36b-86df-a235-6e6f1dddda84.png)
<p class="codepen" data-height="402" data-default-tab="html,result" data-slug-hash="bGoVdXW" data-user="rm5912" style="height: 402px; 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/rm5912/pen/bGoVdXW">
  Swiper-lesson1</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```css:CSS
.swiper-button-prev::after,
.swiper-button-next::after {
     background-image: none !important;
 }
```


## 困りました。とりあえず適当に試すか・・・
あれ〜。書いてあるのがことごとく使えない。。
どうすっかな〜と検証ツールでボタンをみると、あれswiper-button::afterになってない？
もしかしてと思い
なんとなく、color:black;を書いてみました。

あれ、変わってない？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111652/5c475e8b-e485-5b6f-ab87-4ae68a304858.png)

<p class="codepen" data-height="401" data-default-tab="html,result" data-slug-hash="abLvWJG" data-user="rm5912" style="height: 401px; 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/rm5912/pen/abLvWJG">
  Swiper-lesson1</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```css:CSS
.swiper-button-prev　::after,
.swiper-button-next::after {
    color: white;
}
```

## font-sizeで大きさかわるんじゃない？
検証ツールを見ると

```css:検証ツール
font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none!important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;
```
とありました。へー、フォントだったのか。
じゃあ、`width`と`height`でサイズが変わらなかったのは当然か。`font-size`で変えてみるか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111652/182de7c8-56b9-5a88-e2b4-65bbbccb7b68.png)

<p class="codepen" data-height="405" data-default-tab="html,result" data-slug-hash="MWEamep" data-user="rm5912" style="height: 405px; 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/rm5912/pen/MWEamep">
  Swiper-lesson1</a> by morioka (<a href="https://codepen.io/rm5912">@rm5912</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111652/fa2976e5-51cd-ff22-c1f2-931ca7685bbe.png)


## まとめ
- swiperのナビゲーションボタンは::afterで変えられる
- ナビゲーションボタンは画像じゃなくてフォント
- colorで色、font-sizeで大きさを変えられる。

お好きなボタンにする場合は::afterにFont Awesomeなどを使うと良さそうです。

それでは。