はじめに
ご存知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.
<!-- 前ページボタン -->
<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.
.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.
.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などを使うと良さそうです。
それでは。