![](https://cxg-design.jp/wp-content/uploads/2024/06/abccard-thumb.png)
ACFの画像で、1度で複数枚スライドするスライダーを作成
前回のBLOGでは、ACFの関係フィールドでループ無しカルーセルを作成しました。今回は、ACFの画像で、1度で複数枚スライドするスライダーを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/b05b261c03acb899e3af8c939828b627.png)
出典 : slick
今回のDEMOは、カードのスライダーです。
1画面で、SPでは2枚、タブレットでは3枚、PCでは4枚表示されます。左右の矢印をクリックすると、SPでは最大2枚、タブレットでは最大3枚、PCでは最大4枚移動します。
ACF設定
フィールドタイプは、画像です。フィールドラベルに、編集画面に表示する名前、フィールド名に、PHPに記入する名前を設定します。戻り値の形式は、画像配列です。ライブラリは、すべてです。
![](https://cxg-design.jp/wp-content/uploads/2024/06/59405bbf68a2c261a95f0ba9c5e2dc37.png)
フィールドタイプは、画像
同じように、8つの画像フィールドを作成します。これで、ACF設定は終了です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/e9ed6d97f4d09d0cac89ed12e426a9ad.png)
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);
}
設置
編集画面に、ACF ANYスライダーのフィールドが作成されます。画像を追加をクリックし、メディアライブラリから画像を選択すると、スライダー画像が設置されます。残りの画像も設定したら完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/319242a68d2a30608cb9d63b55215057.png)
画像を追加をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/456810ed6cc0f26e240ae588b49f35fd.png)
メディアライブラリから画像を選択
![](https://cxg-design.jp/wp-content/uploads/2024/06/6d01c44d500050880996c8beb70b4bbb.png)
スライダー画像が設置
![](https://cxg-design.jp/wp-content/uploads/2024/06/88b764f8778daeb21bc295331fcfad91.png)
残りの画像も設定
これで、今回の説明は終了です。今回のようなスライダーであれば、多くの画像をスッキリコンパクトに見せることが出来ます。編集画面のみで設定できるので、テンプレートで場所が決まっている場合、プラグインよりこちらがオススメです。