![](https://cxg-design.jp/wp-content/uploads/2024/05/cafeloop_thumb.png)
ACFの画像で、無限ループの横スクロールスライダーを作成。
以前のBLOGでは、Slickでスライダーを作成する方法を紹介しました。今回は、ACFの画像で、無限ループの横スクロールスライダーを作成する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/b05b261c03acb899e3af8c939828b627.png)
出典 : slick
今回のDEMOは、カフェのイメージ写真をスライダーにしました。
6枚の画像をスライダーにしています。
ACF設定
フィールドタイプは、画像です。フィールドラベルに編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。戻り値の形式は、画像配列です。ライブラリは、すべてです。
![](https://cxg-design.jp/wp-content/uploads/2024/05/2ba64ad9983e717029be91719a9e5550.png)
フィールドタイプは画像
項目 | 設定値 |
---|---|
フィールドタイプ | 画像 |
フィールドラベル | スクロール画像01 |
フィールド名 | add_scrollphoto01 |
戻り値の形式 | 画像配列 |
ライブラリ | すべて |
同じように、他5つのフィールドを作成します。これでACF設定は、終了です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/f13a44c026ccf9aff343ce2e9493b938.png)
同じように他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;
}
}
設置
編集画面に無限ループスライダーのフィールドが作成されます。画像を追加をクリックして、メディアライブラリから画像を選択し、選択ボタンをクリックします。画像フィールドに画像が設定されます。
残りの画像も同様に設定します。これで完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/2c365d2f831eaeda253cee7cdefa1cf2.png)
画像を追加をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/05/8226284b0a657da5ea7e15a8b9e5f82e.png)
メディアライブラリから画像を選択
![](https://cxg-design.jp/wp-content/uploads/2024/05/5c01b65fdc27d9370b8221e1e8ead022.png)
画像フィールドに画像が設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/e83f5f9d3dfd03dcdc8faefd3d32dbc5.png)
残りの画像も同様に設定
これで今回の説明は終了です。今回はシングルページに設置しましたが、トップページや固定ページにも設置できます。フィールドの画像を変更するだけで、スライダー画像を変更できるので、便利ですね。