【Swiper】左右の矢印の色を変更する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperの左右の矢印の色を変更する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

Swiperで左右の矢印の色を変更する方法

Swiperでスライドの表示を切り替えることができる左右の矢印は、デフォルトでは青色（カラーコード#007aff）になっています。大体のデザインに合わせやすい色ですが、色を変更したいケースもあるかと思います。

デザインそのものを変更したい場合は別途左右の矢印の要素を作って当てはめることができますが、そこまでする必要はないけど色だけ変更したい場合は、下記のいずれかの方法になるかと思います。

• classを指定して矢印の色を白か黒に変更する
• CSSを上書きして矢印の色を変更する

どちらも簡単に導入できる内容です。それぞれの変更方法をご紹介しますね。

Swiperのclassで矢印の色を白か黒に変更する

Swiperでは、デフォルトの矢印の他に黒と白のクラスが用意されています。そのクラスを「prev・next」のclass属性に追加することで矢印の色を変更することができます。

それぞれ下記のように指定します。

矢印の色を黒に変更する

<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-button-next swiper-button-black"></div>

矢印の色を白に変更する

<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>

黒と白に変えるだけでデザインにマッチするのであればこちらの方法で！

ただ指定したい色がある場合は次項を参考にしていただければと思います。

SwiperのCSSを上書きして矢印の色を変更する

黒や白以外の色を指定したい場合はSwiper本体のCSSより後に読み込んでいるCSSファイルに下記のスタイルを追加します。カラーコードは変更したい色を指定します。

.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #ff2911; //ここに変更する色を指定
}

これで矢印の色を好きなように変更することができます！

最後に

Swiperは本当に色々な案件で使わせてもらっていて、今ではWeb制作になくてはならないスライダーライブラリの一つとなっています。これからも多用させていただくと思いますので、皆さんにとって有益な内容であれば記事にしていきたいと思います！

以上、Swiperで左右の矢印の色を変更する方法のご紹介でした！