本日はslickスライダーのオプションである「responsive」を使用してウィンドウ幅に応じてスライダーの枚数を変更する方法+スライドの枚数に応じてslickを発動させる方法をご紹介します。
はじめに
PHPやWordPress環境の場合、スライド要素の数がページによって動的に変化することがありえます。
例えば、トップページなどで、あるカテゴリーの記事の一覧を10ページ表示させたい。ただ、10件全部表示させると少し縦長になってしまうので、PC幅では1行3列、スマホでは1行1列での表示にさせ、スライダーで10記事全部を表示したい。みたいな感じです。
しかし、最初の方は記事が少ないと思います。記事が少ないのにわざわざスライダーにする必要はありませんし、記事が少ないのにスライドしてしまうのはユーザー体験的にもよくないです。そこで今回はレスポンシブ+スライドの枚数に応じてslickを発動させる方法を紹介するに至りました。
ソースコード例
PHPソースコード例
PR
<?php
$args = array(
'post_type' => 'column',
'posts_per_page' => 10,
);
$the_query = new WP_Query($args);
if( $the_query->have_posts() ): ?>
<div class="slick__list">
<?php while( $the_query->have_posts() ):$the_query->the_post();?>
<div class="slick__item">
<div class="slick__img">
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" width="300" height="300">
</div>
<p class="slick__ttl"><?php the_title(); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif;
wp_reset_postdata();
?>
ソースコード解説
「column」という投稿タイプの記事一覧を表示すると仮定しています。
CSSソースコード例
.slick__list {
height: auto;
visibility: hidden;
}
.slick__list.slick-initialized {
visibility: visible;
}
.no-slick {
display: flex;
justify-content: space-between;
visibility: visible;
}
.slick__item {
width: calc(33% - 20px);
margin: 0 10px;
height: auto;
}
.slick__img {
position: relative;
margin: 0 auto;
}
.slick__img::before {
content: "";
display: block;
padding-top: 100%;
}
.slick__img img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 10px;
}
.slick__ttl {
margin-top: 16px;
line-height: 1.5;
}
.slick-dots {
text-align: center;
}
.slick-dots li {
width: 8px;
height: 8px;
display: inline-block;
background-color: rgba(0, 0, 0, 0.1);
margin: 0 4px;
border-radius: 50%;
}
.slick-dots li button {
opacity: 0;
}
.slick-dots li.slick-active {
background-color: #094;
}
@media screen and (min-width: 768px) {
.slick__ttl {
font-size: 20px;
}
}
@media screen and (max-width: 767px) {
.slick__item {
width: calc(50% - 10px);
}
.slick__ttl {
font-size: 18px;
}
}
@media screen and (max-width: 480px) {
.slick__item {
width: 100%;
}
.slick__ttl {
font-size: 18px;
}
}
CSSソースコード解説
.slick__list
ページにアクセスして、htmlが読み込まれて、slickが適用されるまでの間、一瞬レイアウトが崩れます。なので「visibility: hidden;」を指定してあります。
.slick__list.slick-initialized
「.slick-initialized」というクラスはslickが適用されたときに付与されるものです。ここに「visibility: visible;」を指定することで、slickが適用されてからの表示になるため、レイアウトが崩れる瞬間が表示されず、綺麗に表示されるようになります。
.no-slick
スライドの枚数が3枚以下のとき用のcssになります。
jQueryソースコード例
jQuery(document).ready(function() {
let windowWidth = jQuery(window).width();
function setupSlick(slickList) {
const itemCount = jQuery(slickList + ' .slick__item').length;
if (windowWidth <= 767 || (windowWidth >= 768 && itemCount >= 4)) {
jQuery(slickList).slick({
autoplay: true,
arrows: false,
dots: true,
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
],
slidesToShow: 3,
});
}else{
jQuery(slickList).addClass("no-slick");
}
}
setupSlick(".slick__list");
});
jQueryソースコード解説
このソースコードでは画面幅が767px以下、または、画面幅768px以上ではスライドの枚数が4枚以上の時にslickが適用されるようにしています。
slickが適用されなかったら、「.no-slick」というクラスが付与されるようになっています。
スライダーが複数になっても対応できるように、「setupSlick」という自作の関数を作成しています。
またslickのレスポンシブで767px以下は2枚、480px以下は1枚になるように設定しています。
スライドの実際の表示
スライドの枚数が4枚以上の時

コメントコメントコメントコメントコメントコメント

コメントコメントコメントコメントコメントコメント

コメントコメントコメントコメントコメントコメント

コメントコメントコメントコメントコメントコメント

コメントコメントコメントコメントコメントコメント

コメントコメントコメントコメントコメントコメント

コメントコメントコメントコメントコメントコメント
スライドの枚数が3枚以下の時

コメントコメントコメントコメントコメントコメント

コメントコメントコメントコメントコメントコメント

コメントコメントコメントコメントコメントコメント
必要なライブラリのCDN
HTMLの<head>タグ内に下記slickのcssのCDNを記載してください。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</body>の閉じタグの近くで、上記で紹介したJavaScriptよりも上に、下記のjQueryとslick.min.jsのCDNを記載してください。
あくまで上記のCDNはこの記事を執筆時点(2024年1月)で最新のCDNであるため、情報が古くなる可能性があります。
下記でCDNの公式を紹介するので、最新のものはそちらからコピーしていただくようお願いいたします。
jQueryのCDN公式
上記のjQueryのCDNは下記公式サイトのものを使っています。
「jQuery 3.x」の「jQuery Core 3.7.1」の「minified」をクリックして表示されるCDNです。
slickのCDN
https://kenwheeler.github.io/slick/#go-get-it
まとめ
slickスライダーのレスポンシブに加え、スライドの枚数によってもslickを発動を制御できるようなソースコードを今回はご紹介しました。今回の記事は特にWordPressやPHP環境で、動的にスライドの枚数が変わるようなシチュエーションで有用になってくる内容となっております。