/*---------------------------
slick slider設定
------------------------------*/
jQuery(document).ready(function(){
jQuery('#PostSlide').slick({
autoplay: true,
autoplaySpeed: 4000,//スライド表示時間mm秒
arrows: true,
dots: false,
slidesToShow: 1,
centerMode: true,
centerPadding: '7%',
focusOnSelect: true,
responsive: [
{
breakpoint: 1000,
settings: {
centerPadding: '0',
}
}
]
});
});

<!--// ランダム記事表示 Slick Sliderスライドショー //-->
<div id="PostSlide" class="clearfix">
<?php
$wp_query = new wp_query( array (
'orderby' => 'rand',//記事をランダムに選択
'posts_per_page' => 8,//8記事
'paged' => $paged,//追加設定でカテゴリを限定可能
'meta_query' => array(
array(
'key' => '_thumbnail_id',
'compare' => 'EXISTS'//サムネイルがある記事のみ
)
)
));
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div>
<a href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail_url( 'large' ); ?>" alt="<?php the_title(); ?>" /></a>
<span class="PostSlide-ttl"><?php the_title(); ?><br /><span class="PostSlide-date"><?php the_date(); ?></span></span>
</div>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<!--// ランダム記事表示 Slick Sliderスライドショー //-->

/*--------------------------------------------------------------------------------------------------------------------
■ランダムスライダーslick設定
--------------------------------------------------------------------------------------------------------------------*/
#PostSlide {
position : relative;
margin : 0;
padding : 0;
width : 100%;
height : 50vh;//高さはウィンドウの50%
height : 50dvh;//iPhone対応
max-height : 600px;//最大高さ指定
overflow : hidden;//横揺れ防止のため必須
}
#PostSlide .slick-slide {
position : relative;
padding : 0;
margin : 0;
width : 100%;
height : 50vh;
height : 50dvh;
max-height : 600px;
border-bottom : 1px solid #000;
}
#PostSlide .slick-slide img ,
#PostSlide .slick-slide video {
display: block;//画像をブロック要素とすることでうまく動作
margin : 0 0 0 auto;//画像を右寄せ
width : 70%;
height : 50vh;//ボックスに対して100%とするとうまく動作せず
height : 50dvh;
max-height : 600px;
object-fit : cover;
object-position: 50% 50%;
}
#PostSlide .slick-slide::before {//左側の青い部分を指定
content: '';
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background : linear-gradient(to right, rgba(24,56,121, 1) 0%, rgba(24,56,121, 1) 80%, rgba(255, 255, 255, 0) 100% );
z-index: 100;
}
#PostSlide .slick-slide span.PostSlide-ttl {
display : block;
width : 30%;
position: absolute;
top: 3%;
left: 2%;
z-index: 150;
color: #fff;
font-family : var(--font-family02);
font-size : 18px;
line-height : 150%;
font-weight : bold;
text-align : left;
}
#PostSlide .slick-slide span.PostSlide-date {
display : block;
padding : 5px 0 0 0;
margin : 10px 0 0 0;
font-size : 15px;
border-top : 1px solid #eee;
}
@media print, screen and (min-width: 1000px) {
#PostSlide .slick-slide span.PostSlide-ttl {
font-size : 24px;
}
#PostSlide .slick-slide span.PostSlide-date {
font-size : 18px;
}
}