今回はプラグインACF（Advanced Custom Fields）の有料機能のひとつ、ギャラリーとslickを使用してサムネイル付きのスライドの実装方法の紹介です。
目指すデザインはこんな感じ。demo（デモページはカスタム投稿ではありません）
今回もslickの基本的な使い方は割愛。
まずはギャラリーを使用した画像一覧の表示方法から。
カスタムフィールドのギャラリーを使った画像一覧表示方法
ACFのギャラリーフィールドを使用すると、カスタム投稿に画像を複数登録することができます。
<?php
$images = get_field('custom_img');
if ($images):
?>
<ul id="slider-ul">
<?php foreach($images as $image): ?>
<li>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php the_title(); ?>">
</li>
<?php endforeach; ?>
</ul>
<div class="thumbs_dots"></div>
<?php endif; ?>if文でギャラリーの中身があった時のみ表示されるようにしており、foreachで回して表示させます。
.thumbs_dotsを設置しているのは、slickの機能でドットの生成位置を変更することができるのでそのための準備です。
【slick】dotsをサムネイルとしてスライダーと連動させる方法
下記コードでslickとサムネイルの指定をします。
$(function () {
let $slider = $('#slider-ul');
/*--- 連動サムネイル（ドット）設定 ---*/
// スライダー初期化時
$slider.on('init', function (event, slick, currentSlide, nextSlide) {
// スライドアイテム取得
slideItem = $('#slider-ul .slick-slide')
// スライドの数だけループ
for (let i = 0; i < slick.slideCount; i++) {
// ループ回数をキーにn番目のスライドを取得
let slideImg = slideItem.filter(function () {
return $(this).data('slick-index') === i;
}).find('img').clone();
// n番目のドットを取得
let dot = $('.thumbs_list').find("li").eq(i);
// n番目のスライド画像のURLを取得
let src = slideImg.attr('src');
// n番目のドットにn番目のスライド画像を背景に当て込み
dot.css('background-image', "url(".concat(src, ")"));
}
});
/*--- slick 設定 ---*/
$slider.slick({
arrows: false, // 前・次のボタンを表示しない
dots: true, // ドットナビゲーションを表示する
dotsClass: 'thumbs_list', // ドットのクラス名を変更
appendDots: $('.thumbs_dots'), // ドットの生成位置を変更
customPaging: function (slick, index) { // ドットの中身を空にする
return '';
},
fade: true, // スライド切り替えをフェード
autoplay: false, //自動再生させない
slidesToShow: 1, // 表示させるスライド数
});
});いろいろ書いてますが、とりあえずはコピペで笑
あとはcssをあてればdemoページのように表示できます。
サムネイルは増えたり減ったりする動的な要素になるのでフレックスボックスで並べるのがおすすめです。
フレックスボックスの使い方はこちら
個人的にこのデザインは結構使うと思っています。
もちろんカスタム投稿じゃなくても使えますし、いくつか画像を見せたいときにはコンパクトに収まっていて便利です。
