【備忘録】swiperのページネーションを文字にカスタマイズする方法
【備忘録】swiperのページネーションを文字にカスタマイズする方法 2021 4/11 PR プログラミング 2021年4月7日2021年4月11日 【備忘録】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> </bodｙ>ページネーションを使うには<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;
widthやheightで大きさを変更できます。 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... あわせて読みたい 【備忘録】スマホの向きの制御とピンチイン・ピンチアウト禁止方法 【備忘録】スマホの向きの制御とピンチイン・ピンチアウト禁止方法 こんにちは！ 今回からメモを『備忘録』という風にしていきます。 理由はこっちの方がかっこいいでは...1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]
posted with カエレバ 楽天市場 Amazon YahooショッピングHTML＆CSSとWebデザインが1冊できちんと身につく本 [ 服部雄樹 ]
posted with カエレバ 楽天市場 Amazon YahooショッピングいちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]
posted with カエレバ 楽天市場 Amazon Yahooショッピング プログラミング よかったらシェアしてね！- URLをコピーしました！
- URLをコピーしました！