【CSS・JS】スライダーSwiperの矢印の色の変更をしてみる
2019/05/10
みなさん、こんにちは。 Mon Webの楠本です。
今回は自分がよく使用しているスライダーのSwiperの矢印の色の変更の仕方を書いてみようと思います。
方法は下記のリンクに書かれていたので、引用させていただきます。
引用：swiperのデフォルトprevnextのSVGのfill色を変える。
自分は上記の引用のブログの方法が良かったので、その方法を使用して色の変更をしました。
Swiperの矢印の色の変更の仕方は何種類か方法があって、
・svgの色指定を直接変更する
・画像を用意してパスを記述する
大きくこの2つではないでしょうか。 それでは上記2つの方法での変更の仕方と自分で感じたメリットも合わせて説明してみたいと思います。
①svgの色指定を直接変更する
Swiperの矢印をデベロッパーツールなどで見てみると、矢印を表示させるのにsvgを使用していることがわかります。
実際にswiper.cssを見てみると、179行目あたりに
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url(“data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D’http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg’%20viewBox%3D’0%200%2027%2044’%3E%3Cpath%20d%3D’M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z’%20fill%3D’%23007aff’%2F%3E%3C%2Fsvg%3E”);
left: 10px;
right: auto;
}
との記述があります。これは矢印の片方なので、それの下の方に.swiper-button-nextの記述がありそれがもう一つの矢印になっています。
ぱっと見とても長いコードですが、
この上記のfill%3D’%23007aff’
この部分が矢印の色を表しており、007affの部分がHEX指定（#ffffffなどの6桁の色コード）になっているので、ここを任意のものに変更したら反映される仕組みになっているみたいです。
変更する際には、必ずcssのバックアップを忘れずに行ってください。また、自分の環境では問題なく動作・変更は出来ましたが異常を起こしたら素直に元に戻しましょう。
こちらの方法のメリットとしては、WPにSwiperを組みこんでいる場合に簡単に色変更が出来る所です。
自分がこの方法を使用した理由がこれで、cssにパスを書くよりも安全に変更できました。 WPで画像のフルパスを書くとなると結構面倒くさかったりするので、それよりはお手軽でした。
②画像を用意してパスを記述する
次に画像を使用しての変更方法です。
こちらの方法を使用して変更すると、かなり自由度のあるものに変更できます。
方法は、上記に記述してある
background-image: url(“data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D’http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg’%20viewBox%3D’0%200%2027%2044’%3E%3Cpath%20d%3D’M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z’%20fill%3D’%23007aff’%2F%3E%3C%2Fsvg%3E”);
のurl部分に表示させたい画像がある所のパスを記述すればOKです。
実際の大きさや表示位置は、実際にブラウザで確認しながら行うといいと思います。 その場合は、上記のcssに追記していけば大丈夫です。
こちらの方法のメリットとしては、自由な画像を矢印として設定することが出来る所です。
表示の大きさや位置をしっかり調整したらかなり個性的なスライダーを作成することが可能になります。
今回はswiperの矢印の色の変更の方法を書いてみました。
上記以外にも矢印を設定しているbackground-imageをdisplay:none;にしてcssにて直線を書いて表示する方法もあったりしますが、記述量も増えるのであえて上記2点にしてみました。
使用している方は一度お試しください！
それでは、また次回に！
良かったらTwitterのフォローとFacebookのいいねをお願いします！