横浜で目標達成に本気な
ホームページ制作会社

senoteWEB担当者のためのスキルアップノート

【slick】表示したい枚数よりも画像が少ない！でもループさせたい！そんなときは？

公開日：

更新日：2023.11.14

WEB制作全般

サイト内にスライドショーを取り入れたい時などに大変役立つ「slick」。

ドットや矢印のカスタマイズは自分で行わなければなりませんが、基本的にはサイトに紹介されている記述を参考に記述するだけであっという間にスライドショーができるありがたいライブラリ。 私もよくお世話になっております。

自動ループやスライドの速さ、１画面あたりの表示なども自分の好きなように設定できます。

今回は基本的なslickの使い方からちょっとだけ応用編。 タイトルにもある通り、「表示したい枚数よりも画像が少ない場合の自動ループの設定方法」についてです。

本題に入る前に、まずslickについて＆slickの基本的な使い方を説明していこうと思います。

そもそも「slick」って何？

https://kenwheeler.github.io/slick/

「slick」は、スライダーを簡単に実装できるプラグインです。

イチから自分でスライダーを実装するためのコードを書く必要がない上、スライドのスピードや自動再生、スライドする枚数などもカスタマイズできる大変便利なものです。

サンプルコードもslickのサイトに記述されているので、jQuery等の知識がまだ浅くて…という初心者の方にも比較的扱いやすいプラグインではないかなと感じます。

slickを実装するための準備

基本的な実装までの流れをご説明します。

jQueryファイルを用意

まずslickを使用するにはjQueryが使用できるようにしておく必要があります。 jQueryファイルを用意していない場合は用意しておきましょう。

https://jquery.com/download/

「Download the compressed, production jQuery 3.6.1」を右クリック→「名前を付けて保存」でダウンロードできます。

slickファイルを一式ダウンロードする

slickでスライドを実装するにあたり、必要なファイルは公式サイトから一式入手できます。

http://kenwheeler.github.io/slick/

メニューの「get it now」→「Download Now」から、zipでファイルを一式ダウンロードできます。

必要なファイル

ダウンロードしたファイルのうち、使用するのは下の5つ。

  • slick-theme.css
  • slick.css
  • slick.min.js
  • fonts(フォルダ)
  • ajax-loader.gif

実際にスライドを動かしてみる

まずは全コード。

<!DOCTYPE html>
<html lang="ja">
　<head>
　　<!-- jquery -->
    　<script src="./js/jquery-3.6.1.min.js"></script>
　　<!-- slick -->
　　<script src="./slick/slikc.min.js"></script>
　　<link rel="stylesheet" href="./slick/slick-theme.css">
　　<link rel="stylesheet" href="./slick/slick.css">
　</head>
　<body>
　　<!-- slide -->
　　<div id="slider">
　　　<div class="photo"><img src="./img/photo01.jpg" alt="写真1"></div>
　　　<div class="photo"><img src="./img/photo01.jpg" alt="写真2"></div>
　　　<div class="photo"><img src="./img/photo01.jpg" alt="写真3"></div>
　　</div>
　　<!-- //slide -->
　　<script>
　　　$(function () {
　　　　//slick slider
　　　　$('#js-slider-1').slick(); 
　　　});
　　</script>
　</body>
</html>

では手順を追いながら簡単に解説をしていきます。

jQueryとslickを使えるように<head>内に記述。

<head>
　<!-- jquery -->
    <script src="./js/jquery-3.6.1.min.js"></script>
　<!-- slick -->
　<script src="./slick/slikc.min.js"></script>
　<link rel="stylesheet" href="./slick/slick-theme.css">
　<link rel="stylesheet" href="./slick/slick.css">
</head>

ファイルのパスは自分で用意した階層に合わせてくださいね。 上記のコードは、slickに関するファイルは「slick」という名前のディレクトリを用意してそこに全部収納している前提になってます。

<body>タグ内にスライド部分を記述

<!-- slide -->
  <div id="slider">
    <div class="photo"><img src="./img/photo01.jpg" alt="写真1"></div>
　  <div class="photo"><img src="./img/photo01.jpg" alt="写真2"></div>
　  <div class="photo"><img src="./img/photo01.jpg" alt="写真3"></div>
  </div>
<!-- //slide -->

スライドにしたい要素（今回で言うとclass=”photo”がついたdivタグたち）を、id=”slider”で囲っています。 id名は何でもいいです。

jQueryでスライド化

<script>
  $(function () {
    //slick slider
    $('#slider').slick();  //id="slider"にslickを適用
  });
</script>

<body>タグ内にスライド部分を記述したさいに命名したid（今回で言うと「slider」）と、

$('#slider').slick();

の部分で指定するidを一緒にすればOK。もしclassで指定した場合はこちらも同じclassを指定してくださいね。

これであっという間にスライドになってます。とっても簡単ですよね。 あとは自分でcssを調整し、見た目を整えたら完成です。

スライドの見た目（何枚表示させたりスライドする枚数を変えるなど）のカスタマイズは公式サイト（http://kenwheeler.github.io/slick/）にもたくさん載っているので、ぜひ参考にしてください。

【応用編】カスタマイズで自動ループを設定した際の落とし穴？

さてここからが応用編と今回の記事の本題となります。

slickのカスタマイズの中に、スライドを「自動ループ」させるか否かの設定と、画面に何枚表示させるか指定できるものがあります。

<script>
  $(function () {
　  //slick slider
　  $('#slider').slick();  //id="slider"にslickを適用
　  slidesToShow: 5； //1画面に5枚表示する
　  autoplay: true, //自動ループ
　});
</script>

前の章のコードを流用して書くとこんな感じ。

ただし、表示枚数が少ない場合はループされません

この場合、5枚以下だとループしません。例えば3枚しかない時は、ループせず2枚がそのまま表示される形になります。

「枚数によって見た目や動きは変えたくない！」「同じ画像が表示されるとしてもループ機能を維持したい！」という方もいらっしゃるのでは。
そんな方のために、掲出枚数が少なくてもループを維持できる記述方法をご説明します。

条件分岐で指定枚数を変える！

スライドを常にループする仕様に変えるには、「表示したい枚数＞画像」の場合と「表示したい枚数≦画像」の場合で条件分岐してあげる必要があります。

「表示したい枚数＞画像」の時は、画像を複製して強制的に5枚以上にすることでループ機能を実装できる

let slidesToShowNum = 5; //slidesToShowに設定したい値
/* slidesToShowより投稿が少ない場合の処理を記述 */
let item = $('#slider .photo').length; //スライド内の画像の個数を取得
if (item <= slidesToShowNum) {
  for (i = 0; i <= slidesToShowNum + 1 - item; i++) { //足りていない要素数分、後ろに複製
  $('#slider .photo:nth-child(' + i + ')').clone().appendTo('#slider');
  }
}

そして、slickの設定は

$('#slider').slick({
  slidesToShow: slidesToShowNum, //slidesToShowNumに設定した値が入る
  slidesToScroll: 1, //何枚スライドさせるか
　autoplay: true, //自動ループ
  autoplaySpeed: 0,　// 自動再生のスライド切り替え時間
  speed: 5000,  //スライドのスピードを設定
　cssEase: ”linear”,　//開始から終了まで一定にスライドが変化
});

slidesToShow: ○○(表示させたい枚数);

ここの設定を「少ないときは複製して5枚以上にする」「5枚以上あるときは普通に表示する」という分岐を設けることで、たとえ1枚の時でもループしてくれるようになります！

こちらの分岐方法であれば、枚数によって表示や動きの見た目が変わってしまうこともありません。

「サイトを立ち上げたばかりで事例やお知らせなど、掲出できる内容がまだ少ないんだけど…」といったときなどにも役に立つと思います。 ぜひ参考になれば嬉しいです。