Swiperのデフォルトのページネーションは前後のスライド矢印のようにカスタマイズ可能です。
この記事ではごくごく基本的なカスタマイズ方法をご紹介します。
なおSwiperそのものの実装方法や使い方については以下の記事を参照下さい。
【2022最新】スライダープラグイン Swiper.jsの使い方
Swiperのページネーションをカスタマイズする方法
ここでは
- CSSでサイズや色、間隔などを調整する方法
- 背景画像を用いる方法
の二種類をご紹介します。まずはデフォルトのページネーションを見ておきましょう。
See the Pen Untitled by Takuma (@takushin0202) on CodePen.
やや見にくいのですが、小さな青丸が画像の底部らへんにあります。
ここからまずはCSSでサイズなどをカスタマイズしていきます。
CSSでサイズや色、間隔などを調整する方法
See the Pen pagination-customized-by-css by Takuma (@takushin0202) on CodePen.
あれだけ小さくて見にくかったページネーションが一気に見やすくなりました。CSSを詳しく見てみましょう。
/* ページネーションの余白を調整 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 15px;
}
/* ページネーションのサイズと色を調整 */
.swiper-pagination-bullet {
background-color: #00fe1e;
height: 25px;
width: 25px;
}
/* 画像のサイズ調整 */
.swiper-slide img {
height: auto;
width: 100%;
}お気づきかと思いますが、ページネーションの余白の調整をするために複数のクラス名を連ねています（結果ものすごく長くなっている）。
ここが一つポイントで、SwiperしかりJQueryのようなライブラリのカスタマイズに共通しているのですが、必ずデベロッパツール上で表示されてる通りにクラス名を記述しないとCSSに反映されないのでご注意ください。
具体的なデベロッパツール上での見つけ方についてはこちらの記事（現在執筆中）で解説しています。
背景画像を用いてカスタマイズする方法
次は背景画像を用いたカスタマイズ方法です。
See the Pen pagination-customized-by-images by Takuma (@takushin0202) on CodePen.
CSSを見てみます。
/* 余白を調整 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin:0 15px;
}
/* 非閲覧中のページネーションの画像 */
.swiper-pagination-bullet {
background-color: transparent; /* デフォルトに黒の背景色がついているため透明に */
background-image: url(画像パス);
background-repeat: no-repeat;
background-size: contain;
height: 40px;
width: 40px;
opacity: 1; /* デフォルトが0.2で透過してしまうので１に戻しておく */
}
/* 閲覧中のページネーションの画像 */
.swiper-pagination-bullet-active {
background-image: url(画像パス);
height: 40px;
width: 40px;
}
/* 画像サイズ調整 */
.swiper-slide img {
height: auto;
width: 100%;
}ポイントとしてはデフォルトで設定されている値を適宜調整することと、閲覧してるページを表すページネーションの画像と非閲覧中の画像とをそれぞれ用意することです。
以上が基本的なカスタマイズ方法となりますので、ここから自分好みの見た目や実案件では指定された通りの見た目になるようにカスタマイズできるようになっておきましょう。
コメント