Bloosh Company

2021年8月7日

Development>WordPress

ACFとswiper.jsで無限に画像を追加する

, ,

前回に引き続き、ACF画像便利シリーズです。今回はswiper.jsを使います。
前回と同じく、ACFでフィールド作成し、画像の追加まで済ませてください。
 
swiper.jsにはCDNもあります。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

便利。
 
そして、テンプレートに以下のソースコードを追加します。

<div class="swiper-container">
	<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.jsはswiper-containerクラスのブロックとswiper-wrapperクラスのブロックで囲み、スライドする要素にはswiper-slideクラスを付与するのが決まりです。
 
あとは下記のJSソースコードを追加すれば動きます。

const swiper1 = new Swiper('.swiper-container', {
	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
	}

});

スライドとかフェードとか設定はお好みで変更してください。

ACFとswiper.jsで無限に画像を追加する #WordPress #ACF #AdvancedCustomFields #swiperjs

<<次の記事

新しくなったlightgallery.js(Ver.2)

前の記事>>

ACFとlightgallery.jsで無限に画像を追加する