Swiper.jsで矢印をFont Awesomeに置き換える

実現したこと

前回に引き続き、スライダーを作るのに便利なjsライブラリ、Swiperの話です。

makumakuworks.hatenablog.com

矢印の部分を画像やFont Awesomeに置き換えたい、という記事はいくつか見つけたのですが、どれを試してももとの矢印が消えずうまくいかなったので、現時点でうまくいく方法を書いていきます。

f:id:nubonubo:20210624032542p:plain

前回の記事から流用したものになりますが、CodePenはこちら

つまずきポイント

まずはGoogleデベロッパーツールで矢印のCSSがどのように書かれているか見てみましょう。

f:id:nubonubo:20210624032912p:plain:w300

するとどうやら、.swiper-button-prev、.swiper-button-nextの擬似要素(:after)にて、swiper-iconsという独自のフォントとして矢印アイコンが配置されているようです。

このため、.swiper-button-prev、.swiper-button-nextにCSS側で背景画像を設定したりimgタグを間に入れても、擬似要素側で描かれている元の矢印が消えることはありません。

どうやったか

無理矢理と言えば無理矢理ですが、.swiper-button-prev、.swiper-button-nextの擬似要素をdisplay: none;で消します。

.swiper-button-next:after, .swiper-button-prev:after {
   display: none;
}

その後、FontAwesomeを読み込みます。

<div class="swiper-button-prev fa-2x"><i class="fas fa-arrow-circle-left"></i></div>
<div class="swiper-button-next fa-2x"><i class="fas fa-arrow-circle-right"></i></div>

たったこれだけ!


参考