ACFの画像で、無限ループの横スクロールスライダーを作成。
以前のBLOGでは、Slickでスライダーを作成する方法を紹介しました。今回は、ACFの画像で、無限ループの横スクロールスライダーを作成する方法を紹介します。
出典 : slick
今回のDEMOは、カフェのイメージ写真をスライダーにしました。
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;
}
}設置
編集画面に無限ループスライダーのフィールドが作成されます。画像を追加をクリックして、メディアライブラリから画像を選択し、選択ボタンをクリックします。画像フィールドに画像が設定されます。
残りの画像も同様に設定します。これで完成です。
画像を追加をクリック
メディアライブラリから画像を選択
画像フィールドに画像が設定
残りの画像も同様に設定
これで今回の説明は終了です。今回はシングルページに設置しましたが、トップページや固定ページにも設置できます。フィールドの画像を変更するだけで、スライダー画像を変更できるので、便利ですね。
