はじめに
画像スライダーやカルーセルを実装しようとして、「レスポンシブ対応」「スワイプ操作」「無限ループ」「自動再生」といった要件を一つずつ手作業で組むうちに、想像以上に工数がかかった経験はないでしょうか。
Slickは、そうした面倒な要件をオプション一つで解決してくれるjQuery製のカルーセルライブラリです。作者のKen Wheeler氏が「the last carousel you'll ever need（もう他のカルーセルはいらない）」と言い切るだけあって、公開から10年以上経った今でも多くのサイトで使われ続けています。
$('.slider').slick({...})とオプションオブジェクトを渡すだけで、ブレークポイントごとの表示枚数切り替えやスワイプ対応が一通り揃うのがSlickの強みです。
とはいえ、説明より動かした方が早いと思います。カルーセルが実際にスライドする様子と、オプションを変えたときの挙動を確認できるサンプルを用意しました。先に触ってみたい方はこちらからどうぞ。
Slickとは
Slickは、jQueryプラグインとして動作するカルーセル（スライダー）ライブラリです。2013年にKen Wheeler氏によって公開され、CSS3のトランジションを使った滑らかなスライドアニメーション、タッチ・スワイプ操作、レスポンシブなブレークポイント設定などを標準機能として備えています。
npmパッケージ名はslick-carouselで、MITライセンスで公開されています。React・Vue全盛の今となっては目新しさこそないものの、既存のjQueryベースのプロジェクトや、サーバーサイドレンダリング中心のサイトに手早くカルーセルを組み込みたい場面では、依然として現実的な選択肢です。
主な特徴
- オプション駆動の柔軟な設定 -
slidesToShowやautoplayなど、見た目や挙動をオプションオブジェクトだけで細かく制御できる - レスポンシブなブレークポイント対応 -
responsiveオプションで画面幅ごとに異なる設定（表示枚数など）を切り替えられる - タッチ・スワイプ操作をデフォルトで対応 - モバイル端末でのスワイプ操作を追加実装なしで利用できる
- 豊富なイベントフック -
afterChangeやbeforeChangeなど、スライド前後の処理をフックできるカスタムイベントが揃っている - アクセシビリティ配慮 - キーボード操作やARIA属性にもある程度対応している
インストール
npmまたはyarnでインストールできます。
npm install slick-carousel jquery
yarn add slick-carousel jquery
Slickは内部でjQueryに依存しているため、jQuery本体もあわせてインストールする必要があります。CDN経由で読み込む場合は、jQuery・slick.js・slick.css（必要に応じてslick-theme.css）をこの順に読み込みます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
Slickのサンプルを動かす
Slickの基本は、対象のコンテナに対して$(セレクタ).slick(オプション)を呼び出すだけです。以下はslidesToShow（同時表示枚数）やautoplay（自動再生）、dots（インジケーター表示）を指定してカルーセルを初期化する要点部分です。
import $ from 'jquery'
import 'slick-carousel'
$('.slider').slick({
slidesToShow: 3, // 同時に表示する枚数
slidesToScroll: 1, // 1回の操作でスクロールする枚数
autoplay: true, // 自動再生の有無
autoplaySpeed: 2000,
dots: true, // 下部のインジケーターを表示
arrows: true, // 左右の矢印ボタンを表示
infinite: true, // 無限ループ
})
下のサンプルでは、実際にスライドするカルーセルに加えて、slidesToShowをボタンで切り替えられるようにしています。数値を変えると、.slick('slickSetOption', 'slidesToShow', n, true)で同時表示枚数がその場で変わる様子を確認できます。jQueryとslick-carouselはどちらもバージョンを固定して読み込んでいます。
初期状態では3枚表示・2秒ごとの自動再生になっています。「1枚表示」ボタンを押すとslidesToShowが1に切り替わり、1枚ずつ大きく表示されるカルーセルに変化します。コード内のautoplaySpeedを大きい値に変えれば、自動再生の間隔を遅くすることもできます。
基本的な使い方
HTML側に対象要素を用意し、jQueryでSlickを初期化するのが基本の流れです。
<div class="slider">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>
import $ from 'jquery'
import 'slick-carousel'
$(document).ready(function () {
$('.slider').slick()
})
オプションを何も渡さなければ、slidesToShow: 1・矢印あり・インジケーターありのデフォルト設定でカルーセルが初期化されます。不要になったカルーセルは$('.slider').slick('unslick')で破棄できます。
実践的なユースケース
レスポンシブ対応で画面幅ごとに表示枚数を変える
ECサイトの商品一覧など、画面幅によって同時表示枚数を変えたい場面は多いはずです。Slickではresponsiveオプションに、ブレークポイント(breakpoint)ごとの設定を配列で渡すことで、画面幅に応じてslidesToShowなどを自動的に切り替えられます。
breakpoint: 768は「画面幅が768px以下になったら」という意味で、その配下のsettingsが適用されます。ブレークポイントを追加したい場合は、この配列に{ breakpoint: 1024, settings: { slidesToShow: 3 } }のようなオブジェクトを増やしていけます。
afterChangeイベントで現在のスライド位置を取得する
カルーセルと連動して、現在何枚目を表示しているかをUIに反映したいケースがあります。SlickはafterChangeというカスタムイベントを発火するので、$('.slider').on('afterChange', ...)でスライド切り替え後の処理をフックできます。
afterChangeのコールバックにはslick（インスタンス自体)とcurrentSlide(0始まりのインデックス)が渡されます。逆にスライドが切り替わる直前に処理をしたい場合は、同じ書式でbeforeChangeイベントを使えば、アニメーション開始前のタイミングで処理を挟めます。
まとめ
Slickは、jQueryさえ動く環境であればオプション設定だけでレスポンシブなカルーセルを組み込める、枯れた安定感のあるライブラリです。slidesToShowやresponsiveといった基本オプションを押さえておけば、商品一覧のスライダーやトップページのメインビジュアルなど、多くのユースケースをカバーできます。
モダンなフレームワークを使うプロジェクトであればSwiperなどのフレームワーク非依存ライブラリを検討する余地もありますが、既存のjQuery資産と組み合わせて手早くカルーセルを実装したいときには、今なお有力な選択肢と言えるでしょう。まずは公式ドキュメントのオプション一覧を眺めながら、自分のプロジェクトに必要な設定を探してみてください。