slickの使い方とオプション一覧｜崩れる原因と2.0の変更を実演

slick は、横に並べた要素を1枚ずつ（または数枚ずつ）切り替えて見せる部品です。トップページの大きな画像、商品のサムネイル、お客様の声の一覧などでよく使われています。表示が崩れたときの調べ方を先に図にしておきます。

flowchart TD
    A[slick が崩れる・動かない] --> B[1. コンソールにエラー<br>→ 読み込み順と jQuery の版]
    B -->|無い| C[2. 幅や高さが0<br>→ 表示後に setPosition]
    C -->|違う| D[3. 横に極端に広い<br>→ flex の子に min-width:0]
    D -->|違う| E[4. 矢印が見えない<br>→ テーマの CSS の色と位置]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS・Node.js 22.23.4・npm 10.9.9 の上で、作業用のフォルダーに npm で slick-carousel 2.0.0 と jQuery 4.0.0、比較用に slick-carousel 1.8.1＋jQuery 3.7.1、Swiper 14.3.0、Splide 4.1.4 を入れました（npm のキャッシュも作業用のフォルダーに置いています）。127.0.0.1 で自作の Node.js のサーバーを動かし、そこで配った自分のテストページを Chromium 153.0.8010.12（Playwright 1.63.0 から起動）で開いて、各オプションの挙動・要素の幅と高さ・画像のリクエストの数・コンソールのエラーを計測しました。slick の既定値はソースコード（slick.js 2.0.0）と README、リリースの内容は GitHub の公式リポジトリと npm の公開情報で確かめています。CDN（jsDelivr）の URL は公式サイトの記載で確かめました（確認日 2026年10月29日）。

slickとは（jQueryのスライダーと2026年のメンテナンス状況）

この節では、slick が何をする部品で、2026年10月29日時点でどの版が出ているのかが分かります。

slick（slick carousel）は、Ken Wheeler さんが公開している jQuery のプラグインで、レスポンシブ対応のスライダーを作れます。 公式サイトの見出しは「the last carousel you'll ever need」で、ライセンスは MIT です。npm のパッケージ名は slick-carousel です。

長く 1.8.1（2017年）が使われてきましたが、2026年に版が動きました。npm と GitHub で確かめた内容です。

• GitHub のリリース一覧の日付は年を省いた表示（今年の日付の表示）でした。npm の latest は 2.0.0 で、2.0.1 はまだ npm に出ていません。
• GitHub のリポジトリはアーカイブ（更新停止）の表示がなく、Star は約2.8万、Issue は約1,100件、プルリクエストは161件が開いたままでした（2026年10月29日時点）。
• 公式サイト（kenwheeler.github.io/slick）の CDN とダウンロードの案内は 1.8.1 のままです。 解説記事の多くも 1.8.1 を前提にしています。

jQuery そのものの使い方は、関連記事「jQueryとは｜使い方・Ajax・fetchとの対応表を4.0の実行結果で解説」で扱っています。

slickの使い方：npm・CDNで入れて最小のスライダーを動かす

この節では、slick slider を入れて、最小のスライダーを表示するまでの手順が分かります。

必要なものは、slick.css・slick-theme.css（見た目、任意）・jQuery・slick.js の4つです。 公式サイトの Get Started も、この順に並べています。

手元で動かした最小のページです。width と height を画像に書いておくと、後で出てくる「高さが0」「読み込み中に高さが跳ねる」を防げます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/node_modules/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="/node_modules/slick-carousel/slick/slick-theme.css">
<style>
  .slider { width: 600px; margin: 0 auto; }
  .slider figure { margin: 0; }
  .slider img { width: 100%; height: auto; display: block; }
</style>
</head>
<body>
<section class="slider">
  <figure><img src="/img/1.svg" width="600" height="300" alt="1枚目"></figure>
  <figure><img src="/img/2.svg" width="600" height="300" alt="2枚目"></figure>
  <figure><img src="/img/3.svg" width="600" height="300" alt="3枚目"></figure>
</section>
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/slick-carousel/slick/slick.min.js"></script>
<script>
  $(function () {
    $('.slider').slick({ dots: true, autoplay: true });
  });
</script>
</body>
</html>

Chromium で開いた結果です。

{ init: true, slides: 7, dots: 3, h: 304, list: 304, cur: 0 }
3.8秒後 current 1

スライドは3枚なのに .slick-slide が7個あるのは、無限ループのための複製（クローン）が4個足されたためです。ドットは3個、3.8秒後には2枚目に進んでいました。ただし画面には左右の矢印が見えませんでした。 理由は「表示されない・崩れる原因」の節で実測しています。

CDN を使う場合、公式サイトは次の URL を案内しています（2026年10月29日時点で 1.8.1）。2.0.0 を使うときは、URL の版を書き換えます。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

slickが作るHTMLの構造（slick-track・slick-cloned・rows）

この節では、.slick() を呼んだあとに要素がどう組み替えられるかと、CSS を当てるときに知っておくクラス名が分かります。

slick は、元の要素の中に「slick-list（見える窓）」と「slick-track（横に長い帯）」を作り、スライドを帯の上に並べて動かします。 6枚のスライドに dots: true で初期化したときの構造を、外側から順に並べました。

表示中のスライドには slick-current と slick-active、centerMode の中央には slick-center が付きます。見た目を変える CSS は、このクラスに当てます。

スライドが余分な要素で包まれる（rows: 0）

既定の rows: 1 のままだと、元のスライドが slick の作る枠の中でさらに1段包まれ、元の要素に width: 100%; display: inline-block; が書き込まれていました。inline-block の下には文字の行の分のすき間ができ、画像300pxのスライドの高さが304pxになりました。

$('.slider').slick({ rows: 0 });  // 包む要素を作らない

rows: 0 にすると、元の要素そのものに slick-slide が付き、高さはちょうど300pxになりました。.slider > figure のような子セレクターの CSS をそのまま効かせたいときにも使えます。2段以上の格子（グリッド）にしたいときは、rows: 2 と slidesPerRow を組み合わせます。

複製（クローン）の数

複製にも元と同じ中身が入るため、スライドの中に id やフォームを入れると重複します。2.0.0 では、複製から id 属性を取り除くように変わりました（GitHub のリリースの記載）。複製のスライドには aria-hidden="true" と tabindex="-1" が付いていました。

slickのオプション一覧（全48項目の既定値と実際の挙動）

この節では、slick のオプションをすべて、既定値と、手元で動かして分かった挙動とともに確かめられます。

既定値は README ではなく slick.js 2.0.0 のソースコードの値を載せました。 README（2.0.0 に同梱のもの）とソースコードでは、2か所の既定値が食い違っていました。

1.8.1 のソースコードも speed は 500、edgeFriction は 0.35 でした。切り替えの速さを README の数字で想定していると、思ったより遅く感じます。

表示・動きのオプション

自動再生のオプション

矢印・ドットのオプション

操作・連動・アクセシビリティのオプション

レスポンシブ・遅延読み込みのオプション

data-slick 属性でも指定できる

要素に data-slick='{"slidesToShow":2,"dots":true}' と書くと、JavaScript で slidesToShow: 3 を渡しても、属性の値（2）が勝ちました。属性の JSON が壊れているとき（キーを " で囲まない {slidesToShow:2}）は、エラーも出ずに無視されました。属性で設定が効かないときは、JSON の形を確かめます。

autoplay・dots・arrows・fadeの実際の挙動（実測）

この節では、よく使う4つのオプションが、実際にどの間隔・どの形で動くのかが、計測した数字で分かります。

autoplay：周期は autoplaySpeed＋speed

beforeChange（切り替えの開始）と afterChange（切り替えの完了）の時刻を、初期化からのミリ秒で記録しました。

autoplay 1000/300 [["before",1017,0,1],["after",1318,1],["before",2319,1,2],["after",2620,2]]
autoplay 1000/800 [["before",1004,0,1],["after",1805,1],["before",2805,1,2]]

autoplaySpeed: 1000・speed: 300 では、1.3秒ごとに切り替わりました。 待ち時間は切り替えが終わってから数え始めるため、1枚あたりの周期は「autoplaySpeed＋speed」になります。既定値（3000＋500）なら3.5秒ごとです。「3秒ごとにしたい」なら、autoplaySpeed を 2500 にします。

pauseOnHover：マウスを離してから数え直す

pauseOnHover: hover at ~1500ms leave at ~4500ms [[1306,1],[5819,2]]
pauseOnHover:false [[1310,1],[2613,2],[3916,3]]

1.5秒の時点でマウスを乗せ、4.5秒の時点で離しました。乗せている間は止まり、離してから約1.3秒後（autoplaySpeed＋speed）に次へ進みました。pauseOnHover: false では、マウスを乗せたままでも1.3秒ごとに進みました。

dots・arrows：テーマの CSS が無いと文字のボタンになる

slick-theme.css を読み込まずに dots: true にすると、矢印は「Previous」「Next」と書かれたふつうのボタン、ドットは番号つきの箇条書きで表示され、スライダーの高さは 488px（画像は300px）になりました。テーマの CSS を読み込むと矢印は「←」「→」の記号になり、高さは304pxでした。

fade：位置を重ねて透明度を変える

fade {"a":[{"left":"0px","op":"1","z":"999"},{"left":"-600px","op":"0","z":"998"},{"left":"-1200px","op":"0","z":"998"}],
      "mid":["0.197495","0.802505"],"track":"(なし)"}
fade+slidesToShow3 {"active":3,"w":200,"opt":3}
fade+centerMode {"active":3,"center":0,"w":200,"centerOpt":false}

• fade では、各スライドを left のマイナスの値で同じ位置に重ね、表示中だけ透明度1にしていました。切り替えの途中（250ミリ秒後）は 0.20 と 0.80 で、2枚が重なって見えます。帯（slick-track）は動きません。
• fade と slidesToShow: 3 を組み合わせると、1枚の幅が200pxになり、600px の枠の中に小さく1枚だけ見える形になりました。 fade は1枚表示で使います。
• fade と centerMode を同時に指定すると、centerMode は false に戻され、slick-center は付きませんでした。

responsiveの書き方とブレークポイントの境目（mobileFirst・unslick）

この節では、responsive オプションの書き方と、breakpoint の数字ちょうどの幅でどちらの設定になるのかが、画面幅を変えて測った結果で分かります。

$('.slider').slick({
  slidesToShow: 4,
  dots: true,
  responsive: [
    { breakpoint: 1024, settings: { slidesToShow: 3 } },
    { breakpoint: 768,  settings: { slidesToShow: 2, arrows: false } },
    { breakpoint: 480,  settings: 'unslick' }   // 480px 未満ではスライダーをやめる
  ]
});

Chromium のウィンドウ幅を 1300px から順に縮め、最後に 1300px へ戻しました。

mobileFirst の側は、slidesToShow: 1 を基準に、480・768・1024 で 2・3・4 枚にする設定で測りました。

breakpoint 以外の設定は、トップレベルの設定を引き継ぎます。arrows: false を 768 の側に書くと、767px 以下では矢印が0個になり、1023px〜768px では矢印が出ていました。

respondTo：ウィンドウではなくスライダーの幅で切り替える

既定の respondTo: 'window' は、ウィンドウの幅で判断します。サイドバーのある2段組みのように、スライダーがウィンドウより狭いときは respondTo: 'slider' にすると、スライダー自身の幅で切り替わります。幅 700px に固定したスライダーで試すと、ウィンドウ幅を 1300px にしても、700px として扱われて2枚表示になりました。

unslick から戻す書き方

const $s = $('.slider');
const opts = { slidesToShow: 4, responsive: [ /* … */ ] };
$s.slick(opts);
$(window).on('resize', function () {
  if (window.innerWidth >= 480 && !$s.hasClass('slick-initialized')) {
    $s.slick(opts);   // unslick されていたら初期化し直す
  }
});

centerModeとasNavFor（中央表示・サムネイル連動）

この節では、中央の1枚を目立たせる centerMode の寸法と、メイン画像とサムネイルを連動させる asNavFor の書き方が分かります。

centerMode の寸法

幅600pxのスライダーで、centerMode: true, slidesToShow: 3, centerPadding: '60px' にした結果です。

centerMode {"listPad":"0px 60px","slideW":160,"centerIdx":"0","centerLeft":220,"active":"-1,0,1"}
centerMode 4枚(偶数) {"slideW":150,"centerLeft":300,"active":"-1:150,0:300,1:450,2:600"}

• slick-list に左右60pxの padding が付き、1枚の幅は（600−60×2）÷3＝160px でした。中央の1枚は 220px〜380px で、ちょうど真ん中です。
• slidesToShow を偶数（4）にすると、中央のはずの1枚が 300px〜450px に来て、枠の真ん中（300px）から半枚分ずれました。 README も「slidesToShow は奇数で使う」と書いています。

中央以外を薄く・小さく見せるのは CSS で書きます。

.slider .slick-slide { opacity: .5; transform: scale(.85); transition: .3s; }
.slider .slick-center { opacity: 1; transform: scale(1); }

asNavFor：メインとサムネイルを連動させる

$('.main').slick({ arrows: false, fade: true, asNavFor: '.nav' });
$('.nav').slick({ slidesToShow: 3, asNavFor: '.main', focusOnSelect: true, centerMode: true });

サムネイル側の3番目（番号2）を押すと、main=2 nav=2 になり、両方が同じスライドへ移りました。お互いに相手のセレクターを asNavFor に書くのと、サムネイル側に focusOnSelect: true を付けるのがこつです。

lazyLoadの3つのモードで画像の読み込みはどう変わるか

この節では、lazyLoad の各モードで、どの画像がいつ読み込まれるのかが、サーバーに届いたリクエストで分かります。

lazyLoad を使うときは、src ではなく data-lazy に画像の URL を書きます。

<figure><img data-lazy="/img/2.svg" width="600" height="300" alt="2枚目"></figure>

8枚のスライドで、初期化から0.8秒の間と、そのあと1回「次へ」を押したあとに、127.0.0.1 のサーバーへ届いた画像のリクエストを順に並べました（数字は画像の番号）。

• ondemand は見えているスライドと、ループのために前に置かれた複製（8番）だけを読み、進めるたびに1枚ずつ増えた。既定値なので data-lazy を書くだけでこの形になる。
• progressive は初期化のあと順に全部を読み、anticipated は見えている1枚と前後の1枚ずつを先に読んだ。

読み込みが終わると、data-lazy は消えて src に入れ替わり、lazyLoaded イベントが出ます。JavaScript が動かないと、data-lazy の画像は1枚も表示されません。 1枚目だけは src に書いておくと、初期化の前から最初の画像が見えます。ブラウザの loading="lazy" や IntersectionObserver を使う方法は、関連記事「IntersectionObserver使い方｜無限スクロール・遅延読込レシピ集」で扱っています。

slickのメソッドとイベント一覧（slickGoTo・afterChange）

この節では、初期化したあとのスライダーを JavaScript から操作するメソッドと、切り替えに合わせて処理を動かすイベントが分かります。

メソッドは $('.slider').slick('メソッド名', 引数) の形で呼びます。 順に呼んだ結果です。

const $s = $('.slider');
$s.on('beforeChange', (e, slick, current, next) => log(`beforeChange ${current}->${next}`))
  .on('afterChange',  (e, slick, current)       => log(`afterChange ${current}`));
$s.slick('slickGoTo', 3, true);                       // 3番へ（true でアニメーションなし）
$s.slick('slickCurrentSlide');                        // 今の番号
$s.slick('slickAdd', '<figure><p>added</p></figure>');   // 末尾に追加
$s.slick('slickRemove', 0);                           // 0番を削除
$s.slick('slickSetOption', 'dots', true, true);       // 第4引数 true で描き直す
$s.slick('slickFilter', (i, el) => i % 2 === 0);      // 偶数番だけに絞る
$s.slick('slickUnfilter');

beforeChange 0->3 / afterChange 3 / current=3 / count=7 / count=6 / dots=6 / speed=500 / filtered=3 / unfiltered=6

init は、.slick() を呼ぶ前に .on('init', …) を書かないと受け取れません。今の枚数を「3 / 6」のように出したいときは、afterChange の current に1を足し、slick.slideCount と並べます。

slickが表示されない・崩れる原因と直し方（実演）

この節では、slick の表示が崩れる・高さが0になる・矢印が見えない、といった不具合を手元で再現し、直したあとの値で確かめた結果が分かります。

1. 初期化の前に画像が縦に並ぶ（ちらつき）

slick.js が動くまでは、ただの画像の並びです。6枚の画像は初期化の前に高さ 1800px で縦に並び、初期化の後に 304px に縮みました。読み込みが遅いと、一瞬だけ縦長に見えてから横並びに変わります。

/* 初期化の前は1枚目だけ見せる */
.slider:not(.slick-initialized) > :not(:first-child) { display: none; }

この CSS を足すと、初期化の前が 300px、後が 304px になり、高さがほとんど跳ねなくなりました。

2. display:none の中で初期化すると幅と高さが0になる

タブやモーダル（初めは display: none）の中のスライダーを、ページを開いたときに初期化した結果です。

display:none中に初期化 直後 {"slider":"0x0","list":"0x0","track":"0px","slide":"0x0"}
表示した直後           {"slider":"600x202","list":"600x18","track":"0px","slide":"0x18"}
次へを押した後         {"slider":"600x488","list":"600x304","track":"7800px","slide":"600x304"}
表示後に setPosition   {"slider":"600x488","list":"600x304","track":"7800px","slide":"600x304"}
表示してから初期化     {"slider":"600x488","list":"600x304","track":"7800px","slide":"600x304"}

非表示の間は幅を測れないため、slick はスライドの幅を0として計算します。 表示しても、そのままではスライドの幅は0、見える窓の高さは18px（矢印とドットの文字の分だけ）でした。「次へ」を押すか、ウィンドウの大きさを変えると計算し直されて直りました。直し方は2つです。

// 直し方1：表示したあとに位置を計算し直す
$('#tab').show();
$('.slider').slick('setPosition');

// 直し方2：表示してから初めて初期化する
$('#tab').show();
if (!$('.slider').hasClass('slick-initialized')) $('.slider').slick();

Bootstrap のタブやモーダルなら、表示が終わったイベント（shown.bs.tab・shown.bs.modal）の中で setPosition を呼びます。display: none と visibility: hidden の違いは、関連記事「display:noneとvisibility:hiddenの違い｜非表示比較表」で扱っています。

3. flex の子に置くと横に極端に広がる

サイドバー（幅200px）と本文を display: flex で並べ、本文（flex: 1）の中にスライダーを置きました。

flex 1   {"slider":"39200x1446","track":"39200px","slide":"2800x1404"} main 39200 scrollW 39229
flex fix {"slider":"800x246","track":"5600px","slide":"400x204"} main 800 scrollW 1000

ウィンドウ幅1000pxなのに、スライダーの幅が 39,200px になり、ページが横に大きくはみ出しました。 flex の子は、既定の min-width: auto のために「中身より狭くならない」ので、slick-track の横に長い幅に引っぱられます。本文側に min-width: 0 を付けると、幅は800pxに収まりました。

.main { flex: 1; min-width: 0; }   /* スライダーを入れる flex の子 */

grid の中に置く場合も同じ考え方で、列を minmax(0, 1fr) にします。flex が効かない原因の一覧は、関連記事「CSS flexboxの使い方早見表｜横並び・中央寄せのコピペ集と効かない原因」で扱っています。

4. lazyLoad と adaptiveHeight で高さが0のまま

lazy ondemand                                 直後:18 0.8秒後:304 次へ後:304
lazy+adaptiveHeight                           直後:18 0.8秒後:18  次へ後:18
lazy+adaptiveHeight+lazyLoadedでsetPosition   直後:18 0.8秒後:304 次へ後:18
lazy+adaptiveHeight+img width/height属性      直後:300 0.8秒後:300 次へ後:300

adaptiveHeight は、画像が読み込まれる前に高さを測るため、遅延読み込みと組み合わせると高さ18pxのまま画像が見えなくなりました。 lazyLoaded のたびに setPosition を呼ぶ方法では、次のスライドで再び18pxになりました。画像に width と height の属性（と CSS の height: auto）を書くと、読み込みの前から高さが決まり、どの時点でも300pxでした。

5. 矢印が見えない（テーマの CSS の白い矢印）

n=6&theme=1 {"prevLeft":-25,"pos":"absolute","beforeContent":"\"←\"","beforeColor":"rgb(255, 255, 255)","beforeOpacity":"0.75","dotsBottom":329}

slick-theme.css の矢印は、白い文字（opacity 0.75）で、スライダーの外側（左右に −25px）に置かれます。白い背景のページでは見えず、スライダーが画面の左端にあると、前への矢印は画面の外（left: −25px）に出ました。ドットもスライダーの下 −25px の位置で、スライダーの高さ304pxの外側（329pxまで）に描かれます。

.slick-prev, .slick-next { z-index: 1; }
.slick-prev { left: 10px; }
.slick-next { right: 10px; }
.slick-prev::before, .slick-next::before { color: #333; }
.slick-slider { margin-bottom: 40px; }   /* ドットの分のすき間 */

テーマの CSS は、url(./fonts/slick.woff2) と url(./ajax-loader.gif) を相対パスで読みます。slick-theme.css だけを別の場所へ写すと、矢印のフォントと読み込み中の画像が見つからなくなります。fonts フォルダーと ajax-loader.gif も同じ場所に置きます。

slickのよくあるエラー（$(...).slick is not a function など）

この節では、slick で出るエラーの原文と、その原因・直し方が分かります。

手元で再現した結果です。エラーの文言は、slick.js（圧縮していない版）で出した原文です。

読み込み順のエラー

pageerror: jQuery is not defined
TypeError: $(...).slick is not a function

slick.js は読み込まれたときに jQuery へ自分を登録します。jQuery がまだ無いと登録できず、あとで .slick() を呼んでも「関数ではない」になります。WordPress のテーマなどで jQuery が defer で遅れて読み込まれる場合も同じです。

二重の初期化

同じ要素に .slick() と .slick({ dots: true }) を続けて呼ぶと、2.0.0 でも 1.8.1 でも Cannot read properties of null (reading 'add') になりました。Ajax で読み込み直すときや、同じスクリプトが2回読み込まれたときに起きます。unslick してから呼び直すと、エラーなしで作り直せました。

const $s = $('.slider');
if ($s.hasClass('slick-initialized')) $s.slick('unslick');
$s.slick({ dots: true });

slick が動かないときは、次の順に確かめます。

• 1コンソールに赤いエラーが無いかほかのスクリプトのエラーで止まっていることもある
• 2jQuery → slick.js → 初期化の順かネットワークのタブで両方が200で読めているか
• 3jQuery と slick の版の組み合わせjQuery.fn.jquery で版を出す。jQuery 4 なら slick 2.0.0
• 4要素に slick-initialized が付いたか付かないならセレクターか初期化の時点の問題
• 5slick-track と slick-slide の幅0なら非表示の中で初期化、極端に広いなら flex の子

slick 1.8.1と2.0.0の違い・jQuery 4対応

この節では、長く使われてきた 1.8.1 と 2026年の 2.0.0 の違い、jQuery 4 と組み合わせるときの注意が分かります。

2.0.0 の一番の変更は、jQuery 4 で動くようになったことです。 jQuery 4 では $.type や $.isArray などが取り除かれ、それを使っていた 1.8.1 は初期化の途中で止まります。手元の組み合わせの結果です。

GitHub のリリースによると、2.0.0 は $.isArray() を Array.isArray() に、.focus() の短縮形を .trigger('focus') に置き換えて jQuery 4 に対応しました。ほかに、window を前提にしないモジュールの形への書き直し、centerMode の .slick-active やドットの aria-label の修正、複製のスライドの id の削除、フォントの SVG 版の廃止と woff2 の追加が入っています。

手元のファイルでも、1.8.1 の fonts フォルダーには slick.svg があり、2.0.0 では slick.svg が無く slick.woff2 が入っていました。テーマの CSS を読み込んだページで実際に取得されたのは slick.woff2 でした。オプション名・メソッド名・イベント名は変わっていないため、1.8.1 用に書いた初期化のコードはそのまま 2.0.0 で動きました。

上げる手順は、npm install slick-carousel@2.0.0（CDN なら URL の版を 2.0.0 に）にして、fonts フォルダーも新しいものに入れ替えることです。jQuery を 4 に上げる予定があるなら、先に slick を 2.0.0 にします。

Swiper・Splideとの比較と移行の判断表（jQuery不要の代替）

この節では、slick と、jQuery を使わない Swiper・Splide の違いと、どれを選ぶかの判断が分かります。

同じ6枚・自動再生・ドット・矢印・「768px 以上で2枚表示」のスライダーを3つで作り、Chromium で開いて比べました。

Swiper は全部の機能を入れた bundle の値です。Swiper は必要なモジュールだけを import すると小さくなります。600px 幅（1枚表示）では、slick の複製は7個、Splide は4個に減りました。

同じ設定の書き方の対応

// slick
$('.slider').slick({
  autoplay: true, autoplaySpeed: 3000, dots: true, arrows: true,
  mobileFirst: true, responsive: [{ breakpoint: 767, settings: { slidesToShow: 2 } }]
});

// Swiper
new Swiper('.swiper', {
  loop: true, autoplay: { delay: 3000 },
  pagination: { el: '.swiper-pagination', clickable: true },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
  breakpoints: { 768: { slidesPerView: 2 } }
});

// Splide
new Splide('.splide', {
  type: 'loop', autoplay: true, interval: 3000,
  mediaQuery: 'min', breakpoints: { 768: { perPage: 2 } }
}).mount();

slick の responsive は「その幅未満」、Swiper の breakpoints は「その幅以上」です。 数字をそのまま写すと、効く範囲が逆になります。

どれを選ぶか

1. 1すでに slick で動いている → slick のまま 2.0.0 へオプションは同じ。jQuery 4 に上げるなら先に slick を上げる
2. 2jQuery を使っていない新しいサイト → Swiper か Splideスライダーのためだけに jQuery（gzip で約27KB）を足さない
3. 3React・Vue の部品として使う → Swiper公式に Swiper Element・React 向けの案内がある
4. 4軽さとアクセシビリティを重視 → SplideJS は gzip で約13KB。ページ単位のドット
5. 5横にスクロールできれば足りる → CSS の scroll-snapJavaScript なしで作れる。自動再生は無い

Swiper の使い方と動かない原因は関連記事「Swiperの使い方｜オプション早見表・React/Vue・動かない原因を実演」で、JavaScript を使わない方法は関連記事「CSS scroll-snapで横スクロールカルーセル｜JSなしの完成版」で扱っています。

よくある質問

Q. slick とは何ですか？ A. jQuery で動くスライダー（カルーセル）のプラグインです。画像や文章を横に並べ、矢印・ドット・自動再生・スワイプで切り替えられます。ライセンスは MIT で、npm のパッケージ名は slick-carousel です。

Q. slick はもうメンテナンスされていないのですか？ A. 2018年の 1.9.0 のあと長く版が出ていませんでしたが、2026年に 2.0.0（npm は2026年9月13日）と 2.0.1（GitHub のみ）が出ました。2026年10月29日時点で、リポジトリはアーカイブされていません。開いたままの Issue は約1,100件あります。

Q. CDN で使うにはどう書きますか？ A. 公式サイトは jsDelivr の //cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css と slick.min.js を案内しています。jQuery 4 と組み合わせるなら、URL の版を 2.0.0 に変えます。jQuery を先に読み込みます。

Q. 自動再生を3秒ごとにするには？ A. 切り替えの周期は autoplaySpeed＋speed でした。既定の speed は500なので、autoplay: true, autoplaySpeed: 2500 で3秒ごとになります。

Q. スマホだけ1枚表示にしたいです。 A. responsive: [{ breakpoint: 768, settings: { slidesToShow: 1 } }] と書くと、767px 以下で1枚になります。768px ちょうどは対象外でした。

Q. スマホではスライダーをやめて縦に並べたいです。 A. その breakpoint の settings に 'unslick' を書きます。ただし一度 unslick になると、画面を広げても自動では戻りませんでした。戻す処理を resize で書きます。

Q. 最初にスライドが一瞬縦に並んでしまいます。 A. slick.js が動く前は、ただの要素の並びだからです。.slider:not(.slick-initialized) > :not(:first-child) { display: none; } のように、初期化の前は1枚目だけを見せる CSS を足します。

Q. タブを切り替えるとスライダーが表示されません。 A. 非表示の中で初期化すると、スライドの幅が0で計算されます。タブを表示したあとに $('.slider').slick('setPosition') を呼ぶか、表示してから初期化します。

Q. 矢印が表示されません。 A. slick-theme.css の矢印は白色で、スライダーの外側（左右 −25px）に置かれます。白い背景では見えず、画面の端では外にはみ出します。left・right を内側に、::before の色を濃くします。枚数が slidesToShow 以下のときは矢印そのものが作られません。

Q. WordPress で slick を使えますか？ A. WordPress は jQuery を同梱しているので、テーマで slick.js を jQuery に依存させて読み込めば使えます。jQuery より先に読み込まれると $(...).slick is not a function になります。WordPress 同梱の jQuery では $ がそのまま使えない設定があるため、jQuery(function ($) { … }) の中で書きます。

まとめ

• slick は jQuery のスライダー。jQuery → slick.js の順に読み込み、.slick({ … }) を1回だけ呼ぶ。2026年10月29日時点の npm の最新は 2.0.0 で、jQuery 4 には 2.0.0 が要る（1.8.1 は $.type is not a function）。
• オプションは48個。speed の既定は README の300ではなく500、自動再生の周期は autoplaySpeed＋speed だった。
• responsive の breakpoint は「その幅未満」、mobileFirst では「その幅より大きい」で効いた。unslick にすると画面を広げても戻らない。
• 崩れる原因の上位は、非表示の中での初期化（幅0。setPosition で直る）、flex の子（39,200px に広がった。min-width: 0）、大きさの無い画像と adaptiveHeight（高さ18px。width・height を書く）、テーマの白い矢印。
• 新しく作るなら、jQuery の有無で選ぶ。jQuery が無いなら Swiper か Splide、横スクロールだけなら CSS の scroll-snap。

参考・出典

確認日はいずれも 2026年10月29日です。

• slick 公式サイト（kenwheeler.github.io）：https://kenwheeler.github.io/slick/
• GitHub「kenwheeler/slick」README：https://github.com/kenwheeler/slick
• GitHub「kenwheeler/slick」Release v2.0.0：https://github.com/kenwheeler/slick/releases/tag/v2.0.0
• GitHub「kenwheeler/slick」Release v2.0.1：https://github.com/kenwheeler/slick/releases/tag/v2.0.1
• npm「slick-carousel」：https://www.npmjs.com/package/slick-carousel
• jQuery「jQuery 4.0 Upgrade Guide」：https://jquery.com/upgrade-guide/4.0/
• Swiper「Swiper API」：https://swiperjs.com/swiper-api
• Splide「Options」：https://splidejs.com/guides/options/
• MDN「min-width」：https://developer.mozilla.org/ja/docs/Web/CSS/min-width

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。