ACFの画像で、無限ループの横スクロールスライダーを作成。

2024.05.28

プラグイン

以前のBLOGでは、Slickでスライダーを作成する方法を紹介しました。今回は、ACFの画像で、無限ループの横スクロールスライダーを作成する方法を紹介します。

出典 : Advanced Custom Fields(ACF)

出典 : slick

今回のDEMOは、カフェのイメージ写真をスライダーにしました。

ACF LOOP SLIDER

SLIDER

6枚の画像をスライダーにしています。

ACF設定

フィールドタイプは、画像です。フィールドラベルに編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。戻り値の形式は、画像配列です。ライブラリは、すべてです。

フィールドタイプは画像

項目	設定値
フィールドタイプ	画像
フィールドラベル	スクロール画像01
フィールド名	add_scrollphoto01
戻り値の形式	画像配列
ライブラリ	すべて

同じように、他5つのフィールドを作成します。これでACF設定は、終了です。

同じように他5つのフィールドを作成

コード

ループ内に下記コードを入力します。

<ul class="scrollslider">
	<?php
		$image = get_field('add_scrollphoto01');
		if( $image ):
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	$size = 'large';
    	$thumb = $image['sizes'][ $size ];
	?>
		<li>
        	<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    	</li>
	<?php endif; ?>
	<?php
		$image = get_field('add_scrollphoto02');
		if( $image ):
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	$size = 'large';
    	$thumb = $image['sizes'][ $size ];
	?>
		<li>
        	<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    	</li>
	<?php endif; ?>
	<?php
		$image = get_field('add_scrollphoto03');
		if( $image ):
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	$size = 'large';
    	$thumb = $image['sizes'][ $size ];
	?>
		<li>
        	<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    	</li>
	<?php endif; ?>
	<?php
		$image = get_field('add_scrollphoto04');
		if( $image ):
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	$size = 'large';
    	$thumb = $image['sizes'][ $size ];
	?>
		<li>
        	<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    	</li>
	<?php endif; ?>
	<?php
		$image = get_field('add_scrollphoto05');
		if( $image ):
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	$size = 'large';
    	$thumb = $image['sizes'][ $size ];
	?>
		<li>
        	<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    	</li>
	<?php endif; ?>
	<?php
		$image = get_field('add_scrollphoto06');
		if( $image ):
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	$size = 'large';
    	$thumb = $image['sizes'][ $size ];
	?>
		<li>
        	<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    	</li>
	<?php endif; ?>												
</ul>

jQuery、Slickを読み込みます。下記コードをJavaScriptファイルに書き込み読み込みます。

$('.scrollslider').slick({
	arrows: false,
	autoplay: true,
	autoplaySpeed: 0,
	speed: 6900,
	infinite: true,
	pauseOnHover: false,
	pauseOnFocus: false,
	cssEase: 'linear',
	slidesToShow: 4,
	slidesToScroll: 1,
	responsive: [
		{
			breakpoint: 769,
			settings: {
				slidesToShow: 2,
		}
		},
		{
			breakpoint: 426,
			settings: {
				slidesToShow: 1.5,
			}
		}
	]
});

CSSでスタイルを整えます。

.scrollslider{
	padding: 18em 0;	
}

.scrollslider li{
	height: 130px;
	border-radius: 10px;
	overflow: hidden;
}

.scrollslider li img {
    width: 100%;
	height: 100%;
	object-fit: cover;
}

.scrollslider .slick-slide {
    margin: 0 10px;
}

@media screen and (min-width: 1250px) {

   .scrollslider li{
	   height: 200px;	
   }

}