jQuery Slickでスライダーを実装する完全ガイド

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

Webサイトに画像スライダーやカルーセルを設置したいと思ったとき、多くの方が最初に候補に挙げるのがjQuery Slickです。設定がシンプルで、レスポンシブ対応も簡単、しかもタッチ操作やスワイプにも対応しているため、初心者からプロまで幅広く使われています。

個人的な経験では、初めてスライダーを実装したときはコードの読み込み順序でつまずき、何時間も「なぜか動かない」状態に悩まされました。実は、Slickがうまく動かない原因のほとんどは、ごく基本的なところにあります。

この記事では、必要なファイルの準備から基本的な初期化、よく使うオプション、レスポンシブ設定、そしてつまずきやすいトラブルの解決方法まで、コピペで使える実例を交えて丁寧に解説していきます。

jQuery Slickとは何か

Slickは、カルーセルやスライドショーを簡単に作れるjQueryのプラグインです。

「最後に使うカルーセルになる」とまで言われるほど機能が充実しており、レスポンシブ対応、複数のブレークポイント設定、CSS3トランジションによるなめらかなアニメーション、タッチやマウスドラッグでのスワイプ操作など、モダンなWebサイトに求められる要素をひと通り備えています。

無限ループや、スライドの追加・削除・フィルタリングといった動的な操作にも対応しているため、シンプルな画像スライダーから複雑な用途まで幅広くカバーできます。より広い視点でスライダー選びを検討したい方は、スライダー webの実装ガイドも参考になります。

導入に必要な4つのファイルと環境

Slickを動かすために必要なファイルは、大きく分けて次の通りです。

ここで最も大切なのが読み込み順序です。jQueryは必ずSlickのJSファイルより先に読み込む必要があります。この順番を間違えるだけでSlickは動きません。

CSSファイルは<head>内に、jQueryとSlickのJSは</body>の直前に置くのが一般的なパターンです。手軽に始めたい場合は、ファイルをダウンロードせずにCDNから読み込む方法がおすすめです。CDNの仕組みや使い方についてはjquery cdnの解説が参考になります。

HTML構造と基本の初期化

Slickのマークアップはとてもシンプルです。

親要素となるコンテナを1つ用意し、その中にスライド1枚ずつをdivで包んで並べるだけです。初心者向けの解説では、ulやliではなくdivで囲む例が基本とされています。

<div class="my-slider">
  <div><img src="1.jpg" alt=""></div>
  <div><img src="2.jpg" alt=""></div>
  <div><img src="3.jpg" alt=""></div>
</div>

あとは、DOMの読み込みが終わったタイミングで、この親要素に対して.slick()を呼び出すだけです。

$(function(){
  $('.my-slider').slick({
    dots: true,
    arrows: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1
  });
});

これだけで、3枚表示・ドット付き・無限ループのスライダーが完成します。

よく使う主要オプション

Slickには数多くのオプションがありますが、実際のチュートリアルで頻繁に登場するのは限られた一部です。まずはこれらを押さえておけば、たいていの用途に対応できます。

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

スマホとPCで表示枚数を変えたい、というのはほぼ必ず出てくる要望です。

Slickではresponsiveオプションに、ブレークポイントごとの設定を配列で並べることで、画面幅に応じた挙動を細かく指定できます。

$('.my-slider').slick({
  slidesToShow: 3,
  dots: true,
  infinite: true,
  responsive: [
    { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3 } },
    { breakpoint: 600,  settings: { slidesToShow: 2, slidesToScroll: 2 } },
    { breakpoint: 480,  settings: { slidesToShow: 1, slidesToScroll: 1 } }
  ]
});

この例では、デスクトップで3枚、600px以下で2枚、480px以下で1枚と、段階的に表示を切り替えています。スマホやタブレットへの対応がこれだけで完結するのは、Slickの大きな魅力です。

デザインのカスタマイズ実例

初期状態のままだと、矢印が見えなかったりスライド同士がくっついて見えたりすることがあります。よくあるカスタマイズをいくつか紹介します。

スライド間に余白を作る

スライド同士に隙間が欲しいときは、CSSで左右にマージンをつけます。

.slick-slide { margin: 0 10px; }

矢印が見えないときの対処

白背景で矢印が見えないのは、疑似要素の色が薄いことが原因です。次の1行で解決できます。

.slick-prev:before,
.slick-next:before { color: #000; }

フェード切り替えに変更する

スライドさせるのではなく、ふわっと切り替えたい場合はfade: trueを追加するだけです。CSSでの細かなアニメーション表現を組み合わせたい方は、css アニメーションの解説も合わせて読むと表現の幅が広がります。

動かないときのトラブル解決チェックリスト

「Slickが動かない」という相談は本当に多いのですが、原因はだいたい決まっています。

Slick導入のメリットとデメリット

より詳細な機能やオプションを深掘りしたい場合は、slick sliderの完全ガイドで体系的に確認できます。

よくある質問

Slickは無料で使えますか

はい、Slickはオープンソースで公開されており、無料で利用できます。商用サイトでも問題なく使えるため、多くの現場で採用されています。

jQueryなしでSlickは使えますか

Slick本体はjQueryに依存しているため、jQueryなしでは動きません。jQueryを使いたくない場合は、Swiperなど別のライブラリを検討することになります。

矢印やドットが表示されないのはなぜですか

多くの場合、slick-theme.cssが読み込まれていないか、疑似要素の色が背景と同化していることが原因です。まずはCSSの読み込みと色指定を確認してみてください。

自動再生の速度はどう調整しますか

autoplayをtrueにしたうえで、autoplaySpeedにミリ秒単位で間隔を指定します。たとえば3000と書けば、3秒ごとにスライドが切り替わります。

CMSでも使えますか

使えます。WordPressなどではテーマに直接記述する方法のほか、Drupalには専用の「Slick Carousel」モジュールが用意されており、コードを書かずに導入することも可能です。

まとめ

jQuery Slickは、正しい手順さえ押さえれば驚くほど短時間でスライダーを実装できるプラグインです。

まずはjQueryを先に読み込む、必要な4ファイルを揃える、正しいセレクタで初期化する。この3点を守れば、動かないトラブルの大半は防げます。基本の実装ができたら、responsiveオプションやCSSのカスタマイズで、自分のサイトに合ったスライダーへと育てていきましょう。

最初はうまくいかないこともあるかもしれませんが、一度仕組みを理解してしまえば、次からは数分で設置できるようになります。ぜひ手元のコードで試しながら、少しずつ自分だけの表現を広げてみてください。