ACFの画像で、レスポンシブ対応のslickスライダーを作成

  • Plugin

    • スライダーはSmart Sliderなど、プラグインでも多くのものがあります。ただ、シングルページで表示場所が固定の場合、JavaScriptでも対応できます。今回はACFの画像で、レスポンシブ対応のslickスライダーを作成します。

     出典 : Advanced Custom Fields(ACF)

     出典 : slick

    今回のDEMOは、ドーナツ画像のスライダーです。

    ACF SLICK SLIDER

    SLIDER

    5枚の画像をスライダーにしています。PCでは、左右の画像が見えるようになっています。

    ACF設定

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

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

    設定項目設定値
    フィールドタイプ画像
    フィールドラベルスライド01
    フィールド名add_slickslide01
    戻り値の形式画像配列
    ライブラリすべて

    同じように残りのフィールドを作成します。これで、ACF設定は完了です。

    同じように残りのフィールドを作成

    コード

    まず、functions.phpにjQuery、SlickのCSS、JavaScriptを読み込みます。

    //jQuery
wp_enqueue_script('jq-script', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js');
//slick
wp_enqueue_script('slick-script', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array(), '', true);
wp_enqueue_style('slick_styles', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');

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

    $(".slide-items").slick({
  autoplay: true,
  autoplaySpeed: 3000, 
  infinite: true, 
  cssEase: 'linear',
  pauseOnFocus: false,
  pauseOnHover: false,
  pauseOnDotsHover: false,
  centerMode: true,
  dots: true,
  slidesToShow: 1,
  variableWidth: true,
  dotsClass: "slide-dots", 
  prevArrow: '<div class="slide-prev"></div>',
  nextArrow: '<div class="slide-next"></div>',
});

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

    <ul class="slide-items">
   	<?php
	$image = get_field('add_slickslide01');
	if( $image ):
    	// Image variables.
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	// Thumbnail size attributes.
    	$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_slickslide02');
	if( $image ):
    	// Image variables.
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	// Thumbnail size attributes.
    	$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_slickslide03');
	if( $image ):
    	// Image variables.
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	// Thumbnail size attributes.
    	$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_slickslide04');
	if( $image ):
    	// Image variables.
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	// Thumbnail size attributes.
    	$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_slickslide05');
	if( $image ):
    	// Image variables.
    	$url = $image['url'];
    	$title = $image['title'];
    	$alt = $image['alt'];
    	// Thumbnail size attributes.
    	$size = 'large';
    	$thumb = $image['sizes'][ $size ];
	?>
		<li>
        	<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    	</li>
	<?php endif; ?>
</ul>

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

    .slide-items {
	margin: auto;
}

.slide-items img {
	height: 60vh; 
	max-height:700px;
	margin: auto;
}

/* Dots */
.slide-dots.slick-slider{
    margin-bottom: 30px;
}

.slide-dots{
    position: absolute;
    bottom: -40px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slide-dots li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 2px;
    padding: 0;
    cursor: pointer;
}

.slide-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
}

.slide-dots li button:hover,
.slide-dots li button:focus{
    outline: none;
}

.slide-dots li button:hover:before,
.slide-dots li button:focus:before{
    opacity: 0.8;
}

.slide-dots li button:before{
    font-style:normal;
    line-height: 24px;
	border-radius:20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    content: '';
    text-align: center;
    background: #aaa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slide-dots li.slick-active button:before{
    opacity: .75;
    color: red;
	border:none;
	background: #000;
}

@media screen and (min-width: 740px) {
		
    .slide-prev, 
    .slide-next {
        position: absolute;
        top: 44%;
        cursor: pointer;
        outline: none;
        border-top: 2px solid #272727;
        border-right: 2px solid #272727;
        height: 20px;
        width: 20px;
	    z-index:5;
    }

    .slide-prev {
        left: 30px;
        transform: rotate(-135deg);
    }

    .slide-next {
        right: 30px;
        transform: rotate(45deg);
    }

}

    設置

    編集画面に、画像フィールドが表示されるので、画像を追加をクリックし、画像を選択します。これで、1つ目のスライド設定完了です。同じように、5つのフィールド全てに画像を設定します。

    画像を追加をクリック

    画像を選択

    1つ目のスライド設定完了

    5つのフィールド全てに画像を設定

    以上で今回の説明は終了です。画像設定のみで、スライダーが作成できるので、大変便利です。レスポンシブ対応に設定しているので、SP、PC両方で綺麗に見れます。Smart Sliderでもスライダーは作成できますが、スタイル固定で、シンプルなスライダーにする場合、今回の設定がオススメです。

    You may also like