slick sliderで作る本格的なカルーセルの実装完全ガイド

折原 慧ウェブデザインデイ 編集ライター

Webサイトに画像やコンテンツを美しく切り替えて表示したいとき、多くの制作者が頼りにしてきたのがSlick Sliderです。「the last carousel you’ll ever need（もう他のカルーセルは必要ない）」という言葉を掲げるこのjQueryプラグインは、レスポンシブ対応やスワイプ操作を数行のコードで実現できる手軽さが魅力です。

個人的にこれまで数多くのコーポレートサイトやランディングページを制作してきた中で、Slick Sliderほど導入のハードルが低く、それでいて柔軟にカスタマイズできるツールは少ないと感じています。この記事では、基本的な組み込みから細かなオプション設定、そして「うまく動かない」という定番のトラブルまで、実装に必要な情報をまとめて解説します。

Slick Sliderとは何か

Slick Sliderは、画像やコンテンツを順番に切り替えて表示するためのjQueryプラグインです。カルーセルやスライダーと呼ばれる仕組みを、複雑なコードを書かずに実現できます。

最大の特徴は、その柔軟性にあります。

スマートフォンではスワイプ操作、パソコンではマウスのドラッグに対応し、CSS3のトランジションを使ったなめらかな動きを標準で備えています。IE8以降の古いブラウザから、Chrome、Firefox、Safari、Edgeまで幅広く動作する点も、長く支持されてきた理由のひとつです。

GitHubでは数万を超えるスターを集めており、WordPressをはじめとするCMS向けの連携プラグインも豊富に存在します。シンプルな画像スライダーから、商品ショーケース、サムネイル付きギャラリー、複数のスライダーを連動させる高度なレイアウトまで、幅広い用途に応えられる実績あるツールと言えます。

主な機能の一覧

公式ドキュメントで紹介されている代表的な機能を整理すると、次のようになります。

• コンテナに合わせて伸縮する完全レスポンシブ対応
• breakpointごとに設定を変えられるresponsiveオプション
• タッチスワイプとマウスドラッグ操作
• 無限ループ（端まで来ると先頭に戻る）
• 横方向と縦方向のスクロール
• 画像の遅延読み込み（lazyload）
• 速度や一時停止を調整できる自動再生
• ドット（ページ送り）と矢印、キーボード操作
• 複数行を表示するグリッドモード
• 右から左へ流すRTL対応

Slick Sliderの導入と必要なファイル

Slickを使い始める方法は、大きく3つあります。公式サイトからのダウンロード、GitHubリポジトリからの取得、そしてCDNの利用です。手軽に試すならCDNが最もおすすめです。

必要なファイルは、実はたった3種類だけです。

ここで最も重要なのが読み込みの順序です。jQueryを先に読み込み、その後にslick.min.js、そして最後に自分で書く初期化スクリプトという順番を守らないと、Slickは動きません。この順序こそが、初心者がつまずく最大のポイントです。

なお、jQuery本体の読み込み方法に不安がある方は、jquery cdnの導入手順を確認しておくと、この後の作業がスムーズに進みます。

基本的なHTML構造と初期化

Slickの使い方は驚くほどシンプルです。親要素にクラスを付け、その中にスライドを並べるだけです。

たとえば次のような構造になります。

<div class="slider">
  <div>スライド1</div>
  <div>スライド2</div>
  <div>スライド3</div>
</div>

各スライドの中身は<div>で囲むだけで、画像でも見出しでもカード型のコンテンツでも構いません。Slickは中身のHTMLに制限を設けないため、自由度が高いのです。

初期化はjQueryで行います。

$(document).ready(function(){
  $('.slider').slick();
});

$(document).ready()でDOMの読み込み完了を待ってから、親要素を指定して.slick()を呼び出します。これだけで、基本的なカルーセルが完成します。オプションを渡したい場合は、.slick({ })の中括弧内に設定を書き加えていきます。

1つのページに複数のスライダーを置きたいときは、.slider1、.slider2のように別々のクラスを付けて、それぞれ個別に初期化するのが定番の手法です。

主要なオプション設定を理解する

Slickの真価は、豊富なオプションによるカスタマイズにあります。よく使う設定を押さえておけば、たいていの要望に応えられます。

以下は、実務で頻繁に使う主要オプションの一覧です。

これらを組み合わせた自動再生スライダーは、次のように書きます。

$('.slider').slick({
  dots: true,
  arrows: true,
  autoplay: true,
  autoplaySpeed: 4000,
  slidesToShow: 3,
  slidesToScroll: 1
});

レスポンシブ対応の設定方法

スマートフォンとパソコンで表示枚数を変えたい、という要望は非常に多いものです。Slickではresponsiveオプションが、この悩みを解決してくれます。

$('.slider').slick({
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: { slidesToShow: 1 }
    }
  ]
});

この例では、通常は3枚表示ですが、画面幅が768px以下になると1枚表示に切り替わります。settingsに'unslick'を指定すれば、特定の幅でスライダー機能そのものを無効化することもできます。この考え方は、CSSアニメーションの活用と組み合わせると、さらに表現の幅が広がります。

実用的なスライダーのパターン

Slickは工夫次第でさまざまな見せ方が可能です。よく使われる代表的なパターンを紹介します。

サムネイル連動ギャラリー

大きなメイン画像と、その下に並ぶサムネイルを連動させるパターンです。asNavForオプションを使って2つのスライダーを相互に紐付けることで実現できます。ECサイトの商品画像や、ポートフォリオでよく見かける形式です。

中央寄せカルーセル

centerMode: trueとcenterPaddingを組み合わせると、中央のスライドを大きく見せ、両隣を少しだけ覗かせる演出ができます。ヒーローエリアやおすすめコンテンツの表示に効果的です。

フェード切り替えのヒーロースライダー

fade: trueを指定すると、横スクロールではなく、ふわりと切り替わる上品なスライダーになります。トップページのメインビジュアルに適しています。動きのあるトップページを目指すなら、パララックス効果との併用も検討する価値があります。

よくあるトラブルと解決方法

Slickは扱いやすい反面、いくつか定番のつまずきポイントがあります。あらかじめ知っておくと、無駄な時間を減らせます。

そのほか、よく相談を受けるトラブルを整理します。

• スライドが縦に積み重なって表示される：CSSが正しく読み込まれていない可能性があります。slick.cssのパスを確認してください。
• 小さい画面でレイアウトが崩れる：responsiveオプションのbreakpoint設定を見直します。
• WordPressで動かない：テーマが読み込むjQueryとの競合が原因のことがあります。jQuery(function($){ })という書き方に変えると解決する場合が多いです。
• 画像の高さがバラバラになる：adaptiveHeight: trueで各スライドの高さに合わせられます。

よくある質問

Slick Sliderは今でも使って大丈夫ですか

Slick本体の更新は落ち着いていますが、実績と安定性は十分で、現在も多くの本番サイトで使われています。jQueryを前提とするため、jQueryを使わない新規プロジェクトでは、ネイティブJavaScript製のスライダーを検討する余地もあります。既存のjQuery環境なら十分に選択肢となります。

jQueryなしで使うことはできますか

Slick SliderはjQueryに依存しているため、jQuery本体の読み込みが必須です。どうしてもjQueryを避けたい場合は、SwiperなどのjQuery非依存のライブラリを選ぶことになります。

複数のスライダーを1ページに置けますか

可能です。それぞれに異なるクラス名を付け、個別に.slick()で初期化するだけです。オプションもスライダーごとに変えられるので、用途に応じた使い分けができます。

導入にどれくらいの時間がかかりますか

基本的なスライダーであれば、慣れていれば15分程度で組み込めます。ただしサムネイル連動や細かいレスポンシブ調整を含めると、通常は半日から1日程度を見込んでおくと安心です。

矢印やドットのデザインは変更できますか

できます。矢印はprevArrowとnextArrowオプションで独自のHTMLに差し替えられ、ドットはCSSでスタイルを上書きすれば自由にデザインできます。slick-theme.cssを読み込まずに、すべて自作のCSSで整えることも可能です。

まとめ

Slick Sliderは、jQueryとファイル3種類の読み込み、そして数行の初期化コードだけで、本格的なレスポンシブカルーセルを実現できる頼もしいプラグインです。

最初につまずきやすい読み込み順序さえ押さえてしまえば、あとはオプションを一つずつ試しながら、自分の理想とする動きに近づけていくだけです。

まずはCDNを使って最小構成のスライダーを動かしてみてください。実際に動くものを手にすると、responsiveやcenterModeといったオプションの意味も、ぐっと理解しやすくなります。この記事が、あなたのサイトに心地よい動きを加える一助になれば幸いです。