ACFの画像で、1度で複数枚スライドするスライダーを作成

2024.06.05

プラグイン

前回のBLOGでは、ACFの関係フィールドでループ無しカルーセルを作成しました。今回は、ACFの画像で、1度で複数枚スライドするスライダーを作成します。

出典 : Advanced Custom Fields(ACF)

出典 : slick

今回のDEMOは、カードのスライダーです。

ACF ANY SLIDER

SLIDER

1画面で、SPでは2枚、タブレットでは3枚、PCでは4枚表示されます。左右の矢印をクリックすると、SPでは最大2枚、タブレットでは最大3枚、PCでは最大4枚移動します。

ACF設定

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

フィールドタイプは、画像

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

8つの画像フィールドを作成

コード

シングルページループ内に下記コードを入力します。

<div class="any_carousel">
	<ul class="anyslider">
		<?php
		$image = get_field('anyslide01');
		if( $image ):
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<li class="anyslide-icon">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</li>
		<?php endif; ?>
		<?php
		$image = get_field('anyslide02');
		if( $image ):
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<li class="anyslide-icon">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</li>
		<?php endif; ?>
		<?php
		$image = get_field('anyslide03');
		if( $image ):
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<li class="anyslide-icon">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</li>
		<?php endif; ?>
		<?php
		$image = get_field('anyslide04');
		if( $image ):
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<li class="anyslide-icon">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</li>
		<?php endif; ?>
		<?php
		$image = get_field('anyslide05');
		if( $image ):
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<li class="anyslide-icon">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</li>
		<?php endif; ?>
		<?php
		$image = get_field('anyslide06');
		if( $image ):
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<li class="anyslide-icon">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</li>
		<?php endif; ?>
		<?php
		$image = get_field('anyslide07');
		if( $image ):
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<li class="anyslide-icon">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</li>
		<?php endif; ?>
		<?php
		$image = get_field('anyslide08');
		if( $image ):
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<li class="anyslide-icon">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</li>
		<?php endif; ?>
	</ul>
</div>

jQuery、slickを読み込みます。JavaScriptファイルを作成し、下記コードを入力し、読み込みます。

$('.anyslider').slick({
	autoplay: false,
	infinite: false,
	slidesToShow: 4,
	slidesToScroll: 4,
	prevArrow: '<div class="slick-prev"></div>',
	nextArrow: '<div class="slick-next"></div>',
	dots: false,
	responsive: [
		{
		breakpoint: 1250,
		settings: {
			slidesToShow: 3,
			slidesToScroll: 3,
		}
	},
	{
		breakpoint: 740,
		settings: {
			slidesToShow: 2,
			slidesToScroll: 2,
		}
	}
]
});

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

.any_carousel {
	padding: 17em 0;
	margin: auto;
	width: 80%;
	max-width: 1700px;
}

.anyslider {
    width: 100%;
    margin: 0 auto;
}

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

.anyslider .slick-disabled {
	visibility: hidden;
}

.anyslider .slick-prev, 
.anyslider .slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    height: 20px;
    width: 20px;
	z-index: 5;
}

.anyslider .anyslide-icon {
	width: 100%;
	height: auto;
	overflow: hidden;
	float: left;
	margin: 0 10px 12px 10px;
	object-position: 50% 50%;
	border-radius: 5px;
	will-change: transform;
}

.anyslider .anyslide-icon img {
	width: 100%;
	height: auto;
}

.anyslider .slick-prev {
    left: -20px;
    transform: rotate(-135deg);
}

.anyslider .slick-next {
    right: -20px;
    transform: rotate(45deg);
}