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

はじめに

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

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

サンプルのスライド

今回はこちらを例に説明していきます。

See the Pen Swiper-lesson1 by morioka (@rm5912) on CodePen.

swiper-button-blackで変わらない！！

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

See the Pen Swiper-lesson1 by morioka (@rm5912) on CodePen.

HTML

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

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

ナビゲーションボタンのサイズが変わらない！！

とりあえずサイズを変えるか〜と、widthとheightを書いてサイズを変えようとすると
あれ、変わってないし！

See the Pen Swiper-lesson1 by morioka (@rm5912) on CodePen.

```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をつけても変わらず・・・。

See the Pen Swiper-lesson1 by morioka (@rm5912) on CodePen.

```css:CSS .swiper-button-prev::after, .swiper-button-next::after { background-image: none !important; } ```

困りました。とりあえず適当に試すか・・・

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

あれ、変わってない？

See the Pen Swiper-lesson1 by morioka (@rm5912) on CodePen.

CSS

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

font-sizeで大きさかわるんじゃない？

検証ツールを見ると

検証ツール

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で変えてみるか。

See the Pen Swiper-lesson1 by morioka (@rm5912) on CodePen.

まとめ

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

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

それでは。