【備忘録】swiperのページネーションを文字にカスタマイズする方法

【備忘録】swiperのページネーションを文字にカスタマイズする方法

こんにちは!
今回はカルーセルスライダーが簡単に作れるJavaScriptライブラリの
Swiperのページネーションのカスタマイズについて備忘録を書いていきます。

この記事を読んでわかることは
swiperのページネーションを文字にカスタマイズする方法

swiperの導入は知っている前提で書かせてもらうため
導入方法は省略します。

目次

ページネーションカスタマイズ

See the Pen
swiper ページネーションカスタム
by 👓ならっち👓 (@naratch_)
on CodePen.

こんな感じにページネーションをボックス1,ボックス2,ボックス3と文字にカスタマイズすることができます。

コードの解説をしていきます。

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.0/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.0/swiper-bundle.min.js"></script>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><div class="box1">box1</div></div>
      <div class="swiper-slide"><div class="box2">box2</div></div>
      <div class="swiper-slide"><div class="box3">box3</div></div>
     </div>
  </div>
  <div class="swiper-pagination"></div>
</body>

ページネーションを使うには<div class=”swiper-pagination”></div>を入れることで使うことができます。(JavaScriptの記述も忘れず)

CSS

.box1 {
  background: #E13239;
  height: 50vh;
}

.box2 {
  background: #EDCB27;
  height: 50vh;
}

.box3 {
  background: #277BED;
  height: 50vh;
}

/*----------------------------
* ページネーションのスタイル
*----------------------------*/
.swiper-pagination {
    display: flex;
}

.swiper-pagination-bullet {
  border-radius:0%!important;
  width: calc(100vw/3)!important;
  height: calc(100vh/6)!important;
  line-height: calc(100vh/6);
  background:#fff!important;
}

.swiper-pagination-bullet-active {
    background:#01B9F5!important;
}

ページネーションのスタイルの下のCSSがカスタマイズに必要なクラスです。
何故か!importantを入れないと優先されなかったので入れています。

.swiper-pagination
ページネーションの親要素
今回は横並びにしました。

.swiper-pagination-bullet
ページネーションの子要素
初期状態はポチ

.swiper-pagination-bullet-active
ページネーションのactive要素
(今のスライドのページネーション)

swiper-pagination-bulletの初期値
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
background: #000;
opacity: .2;

カスタマイズ
border-radius:0%!important;
width: calc(100vw/3)!important;
height: calc(100vh/6)!important;
line-height: calc(100vh/6);
background:#fff!important;

widthheightで大きさを変更できます。
border-radius: 0%;で四角にできます。
opacity:透明度を変更できます。
background:#fffで指定していますが:transparentで色の指定なしでも良さそうです。

今回は四角ボックスっぽくしたかったので
width: calc(100vw/3)
height: calc(100vh/6)
line-height: calc(100vh/6);
にしていますが、各自カスタマイズしてみてください。

JavaScript

var mySwiper = new Swiper('.swiper-container', {               
    paginationClickable: true,
    speed: 1000,
    mousewheel: {
    invert: false,
                },
          
    pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
    renderBullet: function(index, className) {
    //中の文字を表示
   return 
    '<span class="' + className + '">' + 
    ["ボックス1", "ボックス2", "ボックス3",][index] + '</span>';  }
               },
                });

pagination:を必ず追加してください。
追加しないとページネーションが使えません。

renderBullet: function(index, className) {
return
‘<要素 class=”‘ + className + ‘”>’ +
[“文字“, “文字“, “文字“, ][index] + ‘</要素>’;  }
},
});
JavaScriptのpaginationに上記を追加すると文字が使える用になります。
変更する箇所としては赤字の箇所だけで問題ないかと思います。

要素
要素を指定できます。

文字
ここを変えることで文字を変更できます。

以上がカスタマイズする方法です。

ページネーションをカスタマイズする上で参考にしたサイト

swiper.jsでのpaginationのカスタマイズについて指定したfunctionから、設定したい内容のHTML文字列を返すようにすればよいと思われます。

リンク

サンプル付き!簡単にスライドを作れるライブラリSwiper.js超解説(各種ナビゲーションカスタマイズ編)サンプル付き!簡単にスライドを作れるライブラリSwiper.js超解説(各種ナビゲーションカスタマイズ編)

リンク

まとめ

swiperのページネーションを文字にカスタマイズする方法でした。

ページネーション自体のカスタマイズする方法は調べれば出てきたのですが
文字に変える方法が見つからず大変でした。
同じ用に苦戦しないように、分かりづらいですが参考になれば幸いです!

swiperは物凄く便利なJavaScriptライブラリなのでぜひ
試してみてください。

あわせて読みたい
【備忘録】WordPressのテーマ「JIN」のブログカードカスタマイズ-外部リンク- 【備忘録】WordPressのテーマ「JIN」のブログカードカスタマイズ-外部リンク-   こんにちは! 今回はWordPressのテーマ「JIN」のブログカードのカスタマイズについ...
あわせて読みたい
【備忘録】MW WP Formのプラグインのファイル選択をカスタマイズする方法 こんにちは!今回はMW WP Formのプラグインのファイル選択をカスタマイズする方法についての備忘録です。 MW WP Formのフォームを作るプラグインは非常に便利なのでCSS...
あわせて読みたい
【備忘録】スマホの向きの制御とピンチイン・ピンチアウト禁止方法 【備忘録】スマホの向きの制御とピンチイン・ピンチアウト禁止方法 こんにちは! 今回からメモを『備忘録』という風にしていきます。 理由はこっちの方がかっこいいでは...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次