Swiperのデフォルト矢印を消して、任意の画像に変更する方法

Swiperで押したら前後にスライドするデフォルトの矢印を消して、任意の画像に変更したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
swiper 矢印を画像に変更 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
前後にスライドするデフォルトの矢印が消えて、画像に変更されてます。
実装手順は以下の通りです。
矢印を消して画像にするCSS
/* 幅・高さを指定 */
.swiper-button-prev,
.swiper-button-next {
height: 50px;
width: 50px;
}
/* 矢印を消す、画像に変更 */
.swiper-button-prev:after,
.swiper-button-next:after {
content: "";
background-repeat: no-repeat;
background-size: contain;
height: 50px;
width: 50px;
margin: auto;
}
/* 前に戻る画像パス */
.swiper-button-prev:after {
background-image: url(http://kasumiblog.xsrv.jp/codepen/images/arrow_lft.png);
}
/* 次に進む画像パス */
.swiper-button-next:after {
background-image: url(http://kasumiblog.xsrv.jp/codepen/images/arrow_rig.png);
}
デフォルト矢印を消して画像にするCSSコード例です。
デフォルト矢印はswiper-button-prev、.swiper-button-nextクラスのafter疑似要素内、contentプロパティに指定されてます。
contentプロパティを空にする事でデフォルト矢印を消せます。
それぞれ上記のクラスにbackground-imageで埋め込みたい画像のパスを指定します。
埋め込みたい画像に合わせて、width・heightで横幅と高さを指定します。
以上で実装完了です。
まとめ
Swiperのデフォルト矢印を消して、任意の画像に変更する方法について紹介しました。
以上で解説を終わります。
目次