はじめに (対象読者・この記事でわかること)

この記事は、Web フロントエンドの開発経験があり、jQuery とプラグインのカスタマイズに興味があるエンジニアを対象としています。
Slick の基本的な使い方はすでに把握しているが、表示順序を毎回違うものにしたい、という要件に直面した方が読み進めると、以下のことができるようになります。

  • Slick のスライドデータを JavaScript でランダムに並び替える方法
  • 並び替えたデータを Slick に正しく渡す実装パターン
  • カスタムオプションと組み合わせた最適なパフォーマンス設定

本記事を書いた背景は、実務プロジェクトで同僚が「毎回違う画像を見せたい」と要望した際、公式ドキュメントに直接的な解決策が示されていなかったことがきっかけです。手軽に実装できるパターンをまとめました。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • HTML/CSS の基本的な知識
  • jQuery の読み込みと基本的な操作方法
  • Slick の導入方法と基本オプション（slidesToShow、autoplay など）

Slick の概要とランダム表示の背景

Slick は、レスポンシブ対応が容易で多機能なカルーセルプラグインとして広く採用されています。標準ではスライドは HTML の記述順に表示されますが、マーケティング施策やユーザー体験の向上を狙う場合、ページが読み込まれるたびにスライド順序を変えることが有効です。例えば、画像バナーの露出回数を均等にしたり、同じユーザーが再訪した際に新鮮さを提供したりするシナリオが考えられます。

Slick 自体に「ランダム表示」オプションは存在しません。しかし、スライド要素（.slick-slide）は JavaScript で DOM 操作が可能なので、表示前に配列をシャッフルし、再度 Slick に初期化し直すという手法で実装できます。ポイントは以下の通りです。

  1. スライドデータを配列化 – HTML から要素を取得し、配列に格納。
  2. 配列をランダムに並び替える – Fisher‑Yates アルゴリズム等を利用。
  3. 並び替えた要素でコンテナを再構築 – 旧スライドは削除し、シャッフル後の要素を挿入。
  4. Slick を再初期化 – $(container).slick('unslick') 後に新しい要素で slick() を呼び出す。

この流れを正しく実装すれば、ページロードごとに異なるスライド順序が保証されます。次の章では、具体的なコード例と注意点をステップごとに解説します。

実装手順：Slick にランダムスライドを組み込む

ステップ 1：HTML と Slick の基本設定

まずは通常通り Slick をインストールし、サンプルマークアップを作成します。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Slick ランダム表示デモ</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  <style>
    .slick-slide img { width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="my-slider">
    <div><img src="img/01.jpg" alt="1"></div>
    <div><img src="img/02.jpg" alt="2"></div>
    <div><img src="img/03.jpg" alt="3"></div>
    <div><img src="img/04.jpg" alt="4"></div>
    <div><img src="img/05.jpg" alt="5"></div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <script src="js/random-slick.js"></script>
</body>
</html>

ここでは .my-slider が Slick の対象です。この段階ではまだランダム化していません。次に JavaScript 部分を作ります。

ステップ 2：配列のシャッフル関数を用意

Fisher‑Yates アルゴリズムは O(n) で均等にランダム化でき、実装もシンプルです。

Js

// random-slick.js
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

この関数はどんな配列でも渡すだけでランダム順に並べ替えて返します。

ステップ 3：スライド要素を取得しシャッフル

次に、DOM からスライド要素を取得し、配列化したうえで shuffleArray を呼び出します。

Js

$(function () {
  const $slider = $('.my-slider');
  // 1. 現在のスライド要素を配列に変換
  const $slides = $slider.children().toArray(); // jQuery オブジェクト →純粋な配列

  // 2. ランダムに並び替える
  const shuffledSlides = shuffleArray($slides);

ステップ 4：Slick を一度破棄し、シャッフル後の要素で再構築

Slick が初期化された状態で子要素を書き換えるとレイアウトが崩れることがあります。安全策として unslick でプラグインを解除し、再度 slick() を呼び出します。

Js

  // 3. 既存の Slick を破棄 (もし既に初期化済みなら)
  if ($slider.hasClass('slick-initialized')) {
    $slider.slick('unslick');
  }

  // 4. コンテナ内をクリアし、シャッフルした要素を再挿入
  $slider.empty();
  shuffledSlides.forEach(function (slide) {
    $slider.append(slide);
  });

  // 5. 再初期化 (任意のオプションを設定)
  $slider.slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2500,
    infinite: true,
    responsive: [
      {
        breakpoint: 768,
        settings: { slidesToShow: 2 }
      },
      {
        breakpoint: 480,
        settings: { slidesToShow: 1 }
      }
    ]
  });
});

このコードを保存すれば、ページが読み込まれるたびに shuffleArray が実行され、スライド順序がランダムになります。

ハマった点やエラー解決

1. unslick 後にエレメントが残った

unslick を呼んでも内部的に残る CSS クラス（slick-initialized や slick-slider）が残り、再初期化時に二重ラップが発生しました。
解決策：$slider.removeClass('slick-initialized slick-slider') で余計なクラスを除去し、empty() 前に off() でイベントハンドラを解除しました。

Js

if ($slider.hasClass('slick-initialized')) {
  $slider.slick('unslick')
         .removeClass('slick-initialized slick-slider')
         .off(); // すべての jQuery イベントを解除
}

2. 画像の読み込み遅延でレイアウトがちらつく

スライドが画像ロード前に表示され、サイズが変わるとちらつきが発生。
解決策：CSS で画像コンテナに height および object-fit: cover; を指定し、ローディング中も一定サイズを保持しました。

Css

.my-slider div {
  height: 200px;               /* 固定高さ */
  overflow: hidden;
}
.my-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. スマホでスワイプが効かない

Slick のレスポンシブ設定が誤って slidesToShow が 0 になるケースがありました。
解決策：ブレークポイント設定を見直し、最低でも 1 スライドが表示されるように保証しました。

完全コードまとめ

Html

<!-- index.html (抜粋) -->
<div class="my-slider">
  <!-- 5 枚の画像要素 -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="js/random-slick.js"></script>

Js

/* random-slick.js */
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

$(function () {
  const $slider = $('.my-slider');
  const $slides = $slider.children().toArray();
  const shuffled = shuffleArray($slides);

  if ($slider.hasClass('slick-initialized')) {
    $slider.slick('unslick')
           .removeClass('slick-initialized slick-slider')
           .off();
  }

  $slider.empty();
  shuffled.forEach(slide => $slider.append(slide));

  $slider.slick({
    slidesToShow: 3,
    autoplay: true,
    autoplaySpeed: 2500,
    infinite: true,
    responsive: [
      { breakpoint: 768, settings: { slidesToShow: 2 } },
      { breakpoint: 480, settings: { slidesToShow: 1 } }
    ]
  });
});

この構成で、「ページがリロードされるたびにスライド順序が変わる」という要件はシンプルに達成できます。

まとめ

本記事では、Slick の標準機能だけでは実現できない「スライドのランダム表示」を、配列シャッフル＋再初期化という手順で実装する方法を解説しました。

  • スライド要素を配列化し Fisher‑Yates でランダム化
  • Slick を unslick で解除し、シャッフル後の要素で再構築
  • 実装時にハマりやすいクラス残留・画像ちらつき・レスポンシブ設定 を対策

これにより、ユーザーに毎回新鮮なカルーセル体験を提供でき、マーケティング施策や A/B テストにも活用できます。次回は、ランダム化に加えて フェードイン/アウトや遅延ロード を組み合わせた高度な演出方法を取り上げる予定です。

参考資料