現役フロントエンドエンジニアの実務ノート
運営者情報 ご依頼 お問い合わせ
フロントエンド

【Slick】スライダーをコピペで実装｜jQuery 4対応のslick 2.0の使い方とよく使うオプション

農添 広晃 公開 更新

Webサイトでよく見かける、画像が横に切り替わるスライダー。Slick（Slick Slider）は、jQueryを使ったスライダーの定番で、数行のコードで実装できます。

Slickは2018年ごろから長く更新が止まっていましたが、開発が再開し、2026年9月にjQuery 4に対応したv2.0.0が公開されました。この記事では、最新の2.0.0を使ったコピペで動くコードと、よく使う設定、つまずきやすいところをまとめます。

この記事の内容は、2026年10月時点のSlick 2.0.0とjQuery 4.0.0で確認しています。オプションの初期値は、2.0.0のソースコードで確認したものです。

スポンサーリンク

完成イメージ

Slickで作った画像スライダー

1枚ずつ横にスライドする基本の形のほかに、フェードで切り替える、複数枚を並べて流す、サムネイルと連動させる、といった使い方ができます。

使うバージョンの選び方

SlickはjQueryのプラグインなので、jQueryのバージョンによって使うSlickのバージョンが変わります。

使っているjQuery Slickのバージョン
jQuery 4（2026年1月公開） 2.0.0
jQuery 3以前 公式のREADMEでは1.8.1を案内

2026年1月に公開されたjQuery 4では、古い関数がいくつか削除されました。1.8.1は、そのうちの$.type()を初期化の処理の中で使っているため、jQuery 4と組み合わせると、初期化の時点でエラーになり、スライダーが動きません。古い記事のコードをコピペして動かない場合は、まずここを疑ってください。

これから新しく作るなら、jQuery 4とSlick 2.0.0の組み合わせがおすすめです。

コピペで動くコード（Slick 2.0.0）

下のコードをHTMLファイルとして保存し、同じ階層にimgフォルダを作ってslide01.jpg〜slide04.jpgを置けば動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slick</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick-theme.css">
<style>
body { margin: 0; }
.slider { width: 90%; margin: 40px auto; }
.slider img { display: block; width: 100%; }
</style>
</head>
<body>
<div class="slider">
  <div><img src="img/slide01.jpg" alt=""></div>
  <div><img src="img/slide02.jpg" alt=""></div>
  <div><img src="img/slide03.jpg" alt=""></div>
  <div><img src="img/slide04.jpg" alt=""></div>
</div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.min.js"></script>
<script>
jQuery(function ($) {
  $('.slider').slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 4000
  });
});
</script>
</body>
</html>

読み込むファイルは次の4つです。

  • slick.css：スライダーが動くために必要なCSS（必須）
  • slick-theme.css：矢印やドットの見た目（なくても動く。自分でデザインするなら外してよい）
  • jQuery：Slickより先に読み込む
  • slick.min.js：Slick本体

jQuery 3のサイトで使う場合は、URLのslick-carousel@2.0.0をslick-carousel@1.8.1に変えてください。

よく使うオプション

オプションは$('.slider').slick({ ... })の中に書きます。よく使うものをまとめました。

オプション 内容 初期値
slidesToShow 一度に表示する枚数 1
slidesToScroll 一度に動かす枚数 1
autoplay 自動で切り替える false
autoplaySpeed 自動で切り替える間隔（ミリ秒） 3000
speed 切り替えにかける時間（ミリ秒） 500
arrows 前後の矢印を表示する true
dots 下にドット（何枚目か）を表示する false
infinite 最後まで行ったら最初に戻る（ループ） true
fade スライドではなくフェードで切り替える false
centerMode 中央の1枚を目立たせ、左右を少し見せる false
pauseOnHover マウスを乗せたら自動再生を止める true
responsive 画面幅ごとに設定を変える null

すべてのオプションは公式サイトにあります。

スポンサーリンク

よく使うパターン

フェードで切り替える（ファーストビュー向け）

$('.slider').slick({
  fade: true,
  autoplay: true,
  autoplaySpeed: 5000,
  speed: 1000,
  arrows: false,
  pauseOnHover: false
});

ファーストビューのメイン画像では、矢印を消してフェードで切り替えることが多いです。pauseOnHoverをfalseにすると、マウスを乗せても止まらなくなります。

画面幅で表示枚数を変える

パソコンでは3枚、タブレットでは2枚、スマホでは1枚並べる例です。

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: { slidesToShow: 2 }
    },
    {
      breakpoint: 768,
      settings: { slidesToShow: 1, arrows: false }
    }
  ]
});

Slickのbreakpointは、初期設定では「その幅以下」のときに使われます。いちばん外側にパソコンの設定を書き、responsiveで狭い画面の設定を上書きしていくと考えると分かりやすいです（mobileFirst: trueにすると、逆に「その幅以上」になります）。

サムネイルと連動させる

const $slider = $('.gallery__slider');

$slider.slick({
  fade: true,
  arrows: false
});

// サムネイルにマウスを乗せたら、同じ番号のスライドに切り替える
$('.gallery__thumb').on('mouseenter', function () {
  $slider.slick('slickGoTo', $(this).index());
});

slickGoToは、指定した番号（0から数える）のスライドに移動するメソッドです。ほかにもslickNext（次へ）、slickPrev（前へ）、slickPause（自動再生を止める）、slickPlay（再開する）などがあり、ボタンから操作したいときに使えます。

よくあるトラブル

Q. slick is not a functionというエラーが出ます

A. 次のどれかです。

  • jQueryが読み込まれていない、またはSlickより後に読み込まれている。jQueryを先に読み込みます
  • jQuery 4なのにSlick 1.8.1を使っている。この場合は$.type is not a functionというエラーが出ることもあります。Slickを2.0.0にします
  • jQueryを2回読み込んでいて、Slickを読み込んだあとに2つ目のjQueryで上書きされている。WordPressのテーマでよく起きます（下の「WordPressで使うとき」を参照）

Q. 矢印が表示されません

A. slick-theme.cssの矢印は、色が白で、スライダーの外側（左右に25pxはみ出した位置）に置かれています。背景が白いページや、スライダーを画面いっぱいに広げている場合は、見えなくなります。

.slider .slick-prev { left: 10px; z-index: 1; }
.slider .slick-next { right: 10px; }
.slider .slick-prev::before,
.slider .slick-next::before { color: #333; }

Q. レイアウトが崩れます

A. Slickは初期化すると、スライドをdivで何重にも包みます。スライドをul / liで書いていると、自動で追加される要素とぶつかって崩れることがあるので、スライドはdivで書くのが無難です。また、初期化される前の一瞬、画像が縦に並んで見えることがあります。気になる場合は、.slider:not(.slick-initialized) > div:not(:first-child) { display: none; }のように、初期化されるまで2枚目以降を隠しておきます。

WordPressで使うとき

WordPressにはjQueryが同梱されています。自分で別のjQueryを読み込むと二重読み込みになり、Slickやほかのプラグインが動かなくなることがあります。

functions.phpで、WordPressのjQueryに依存させて読み込みます。

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.css', [], '2.0.0' );
	wp_enqueue_style( 'slick-theme', 'https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick-theme.css', [ 'slick' ], '2.0.0' );
	wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.min.js', [ 'jquery' ], '2.0.0', true );
} );
  • WordPressのjQueryのバージョンは、ページのソースのjquery.min.js?ver=の部分で確認できます。jQuery 3なら、上のコードの2.0.0を1.8.1に変えます
  • WordPressのjQueryでは$がそのままでは使えないことがあるので、jQuery(function ($) { ... });の中に書きます

ほかのスライダーと比べたい場合

jQueryを使わないサイトならSwiper、背景画像をズームしながら切り替えたいならVEGASが向いています。違いは、こちらの記事で比較しています。

まとめ

  • jQuery 4ならSlick 2.0.0、jQuery 3以前なら1.8.1。1.8.1はjQuery 4では初期化でエラーになる
  • jQueryを先に読み込み、スライドはdivで書く
  • 画面幅ごとの設定はresponsive。初期設定では「その幅以下」に効く
  • 矢印が見えないときは、slick-theme.cssの白い矢印がスライダーの外にあるのが原因
  • WordPressではjQueryを二重に読み込まず、wp_enqueue_script()の依存に'jquery'を指定する