Swiperを使ってスライダーアニメーションを実装する〜ページネーションやナビゲーションのカスタマイズ編〜

6974 ワード
swiper CSS HTML HTML テキストリンク

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Swiperのページネーションやナビゲーションのカスタマイズの方法について

■ 関連記事
・Swiperを使ってスライダーアニメーションを実装する〜導入編〜
・Swiperを使ってスライダーアニメーションを実装する〜使い方編〜

色を変更

白か黒に変更する

swiperで予め用意されている以下のクラス名を指定すると、ページネーションとナビゲーションの色を
白か黒に変えることができます。

<!-- ページネーション -->
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-pagination swiper-pagination-black"></div>

<!-- 戻る矢印 -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-black"></div>

<!-- 進む矢印 -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-next swiper-button-black"></div>

好きな色に変更する

検証にてcolorプロパティがどこに当てられているのかを確認します。

.swiper-button-next,
.swiper-button-prev {
  color: pink;
}

設定したい色に変更することができました。

矢印を変更

まず、ナビゲーションがどう定義されているか検証を使って確認します。
swiper-iconsというfont-familyが指定されていて、contentにnextと入力していると矢印が表示されています。

検証からセレクタをコピーしてfont-familyの値を変更し、font-weight: bold;を指定します。
※ font-weight: bold;を指定しないと表示されません。

.swiper-button-next::after,
.swiper-button-prev::after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
}

Font Awesomeに移動し、目的のアイコンを表示したら、以下の丸印の文字列をコピーします。

バックスラッシュを入力後、コピーした文字列を貼り付けます。

  .swiper-button-next::after {
    content: "\f0a9";
  }

Font Awesomeを使えるように読み込みを行います。

<head>
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet" />
</head>

Font Awesomeのアイコンを使ってナビゲーションバーを変更することができました。
左側のナビゲーションバーも同じ手順で変更することができます。

アイコンの大きさを変更

ナビゲーションアイコンの大きさを変更する

疑似要素にfont-sizeプロパティが指定されているので、アイコンの大きさを変更したい場合は
疑似要素にfont-sizeプロパティを指定します。

.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 50px;
}

ページネーションの大きさを変更する

ページネーションの丸印の大きさを変えるには、widthプロパティとheightプロパティを変更します。

他に、border-radiusプロパティを変えると形を四角に変更したり、上のセレクタのmarginプロパティの横の値を変更すると、丸印の間隔を調整することができます。

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}