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のデフォルト矢印を消して、任意の画像に変更する方法について紹介しました。

以上で解説を終わります。

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

実装サンプル

矢印を消して画像にするCSS

まとめ

関連記事