WordPressにて、たくさんの画像をスライドさせたい場合の解説をします。
スライダーライブラリSwiperと、WordPressのプラグインAdvanced Custom Fieldsを使用します。
Swiperのバージョンは8です。
Swiperを設置するまでの方法はこちら→Swiper 基本の使い方
さて、前回のACFとlightgallery.jsで無限に画像を追加するに引き続き、ACF画像便利シリーズです。今回はSwiperを使います。
前回と同じく、ACFでフィールド作成し、画像の追加まで済ませてください。
HTMLマークアップ
テンプレートには以下のソースコードを追加します。
<div class="swiper">
<div class="swiper-wrapper">
<?php
$photo = get_field("画像");
$photo_ids = array();
if(!empty($photo)){
preg_match_all( '/wp-image-([0-9]+)/', $photo, $matches );
if($matches) {
$photo_ids = $matches[1];
}
}
foreach ($photo_ids as $photo_id) {
$attr = array(
"loading"=> "lazy",
"alt" => get_bloginfo( 'name' ),
"class" => "swiper-slide"
);
echo wp_get_attachment_image($photo_id, "full", 0, $attr);
}
?>
</div>
<div class="el"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>前回と同様、画像IDを取り出して画像作成しています。
ポイントはクラス名にswiper-slideを追加してる点です。
Swiperはswiperクラスのブロックとswiper-wrapperクラスのブロックで囲み、スライドする要素にはswiper-slideクラスを付与するのが決まりです。
swiper-conf.jsで実際に動かす
const swiper1 = new Swiper('.swiper', {
loop: true,
speed: 600,
autoplay:{
delay:3000,
disableOnInteraction: false
},
effect:"slide",
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.el',
type: 'bullets',
clickable: true
}
});上記のJSファイルはswiper-bundle.min.jsのあとに読み込んでください。
スライドとかフェードとか設定はお好みで変更してください。
