2020.12.22  2021.04.04

swiper.jsページネーションの背景画像をスライド画像と連携させる方法

みなさんこんにちは!マコブログです!

本日は、swiper.jsを使用してスライドを作成し、ページネーションにスライドの画像を連携させる方法についてご紹介したいと思います。

swiper.jsの標準ページネーションとして、よく丸ボタンなどが用意されていますよね。
そのページネーションをアレンジする方法は、少し工夫が必要なんです!

スライドの画像を投稿機能等で動的に生成している場合、HTMLやCSSだけではページネーションの背景画像を動的に変えることは難しいです。
さらにページネーションを動的にカスタマイズする方法はあまり出回っていないので、今回僕が考えた方法を紹介したいと思います。
jsを使用して動的に変わるスライド画像に対応したページネーションを作っていきましょう。
※開発環境はWordPressを想定しています。

大まかな流れとしては下記です。


1.PHP(HTML)側でスライドを作成
2.スライドの画像が、管理画面等で変更でき、動的に出力されるように処理
(今回はsingle.phpを採用し、投稿記事内で管理画面から設定した画像を呼び出します。)
3.jsで出力されている画像のURLを取得or確認
4.取得できたURLをJavaScriptでページネーションの背景画像にする
5.CSSで見た目を調整して完成

まずはswiperを動く状態にする。

swiper.jsを読み込んで、公式や参考サイトからソースを引用するなどしてswiperを動く状態にしてください。
https://xn--web-oi9du9bc8tgu2a.com/js-swiper-sample/
swiper参考サイト

参考サイト等をみても、ページネーションをスライド画像と連携させているものはありませんよね。
スライドが動く状態になったら、次のステップです。

任意の場所にページネーションを表示させる。
既にページネーションも作成したよ。という方は次のHTMLの処理へどうぞ。
ページネーションはswiperのオプション設定内で、

pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},

上記の様に設定します。
htmlでは

<div class="swiper-pagination"></div>

という空の要素を用意しましょう。
このswiper-paginationという領域にページネーションが配置されます。

ページネーションに背景画像を動的に設定する方法は、HTMLとCSSだけでは不可能です。
なので、JavaScriptで対応します。

HTMLの処理

HTMLファイルを開いてください。
先程のページネーションのタグの近くに、
swiper.jsでスライドさせる順に、動的に画像を呼び出してください。

<img src=”~~~” id=”ID名”>
<img src=”~~~” id=”ID名02″>

※このsrcの中身をSwiperで表示する画像のURLに動的に代わるようにしてください。下記は例です。

例)

<?php echo wp_get_attachment_image(post_custom('カスタム投稿名'), 'サイズ', false, array('id' => 'ID名')); //画像出力 ?>

カスタム投稿タイプで設定した画像を呼び出しています。

imgタグでページネーション付近に画像を呼び出したら、その画像を非表示にしてください。
cssでdisplay: none;を指定しましょう。

これでHTMLの準備は完了です。

次はjavascriptです。

とりあえず下記を記述しましょう。

var swiper_pagenation_img01 = document.getElementById('ID名').getAttribute('src')
var swiper_pagenation_img02 = document.getElementById('ID名02').getAttribute('src')
console.log(swiper_pagenation_img01)
console.log(swiper_pagenation_img02)

document.getElementById(‘ID名’).getAttribute(‘src’)で、指定したID名のsrc属性の値を抽出することができます。
console.logでブラウザのコンソール画面に取得したURLを表示します。



これでコンソールに画像のURLが出力されていれば問題ありません。

$(‘.swiper-pagination-bullet:nth-child(1)’).css(‘background-image’, ‘url(‘ + swiper_pagenation_img01 + ‘)’)
$(‘.swiper-pagination-bullet:nth-child(2)’).css(‘background-image’, ‘url(‘ + swiper_pagenation_img02 + ‘)’)
これは、ページネーションについているデフォルトのクラス名(swiper-pagination-bullet)に、
背景画像をあてるという記述です。

‘background-image’, ‘url(‘ + swiper_pagenation_img01 + ‘)’
‘background-image’, ‘url(‘ + swiper_pagenation_img02 + ‘)’
上記で先程用意した変数(画像のURL)をbackground-imageとしてあてています。

ここまで完了したら、ページネーションにあたっているCSSを見てみましょう。
background-imageが問題なくあたっていれば最後にCSSです。

CSSの処理

ここからは簡単です。
ページネーションについているデフォルトのCSSを上書きして、好みの形にしましょう。
そして、background-size、background-position、background-repeat、を設定すれば、動的に生成されるスライド画像とページネーションの背景を連携する事ができました!


まとめ

いかがでしたか?
今回はswiper.jsのpaginationについてお話していきました。
管理画面などから動的にスライド画像が生成され、それと連携したページネーションを作成することで、
サイトのデザインもぐっと引き締まり、ユーザーが次のスライド画像を認識しやすくなるでしょう。

こちらの記事も是非チェックしてみてください↓
Google仕事検索を使って求人情報をアピールする方法

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →