slick（スリック）の使い方とオプション設定の完全ガイド！基本から応用まで丁寧に解説

更新日：

2024/11/21

jQueryプラグインのslickは、シンプルな設定でレスポンシブなスライダーが作れる便利なツールです。この記事では、slickの基本的な使い方から、オプションを使ったカスタマイズ、さらには実用的なサンプルコードまでを丁寧に解説します。slickを使いこなして、ユーザーを惹きつけるスライダーを実装しましょう！

1 slickとは？特徴と導入方法を解説！
2 slickの基本的な使い方をマスターしよう！
- 2.1 HTMLの書き方
- 2.2 JavaScriptでの設定
3 slickをカスタマイズ！よく使うオプション設定
4 スライドの切り替えエフェクトを変更しよう
- 4.1 フェードイン・アウトでスライドを切り替える
- 4.2 スライド切り替えのスピードを調整する
5 スマホ表示に最適化！レスポンシブ対応のコツ
- 5.1 画面幅に応じてスライド表示を変更する
- 5.2 中央寄せ表示で前後のスライドをチラ見せする
6 slickのオプション一覧
7 slickの実用的なサンプルコード集
8 サムネイル付きスライダーを作成する
- 8.1 複数のスライダーを同期させる
9 slickのよくある質問とトラブルシューティング
- 9.1 slickが動かない!原因と対処法
- 9.2 スライドのサイズがおかしい時の直し方

slickとは？特徴と導入方法を解説！

slickは、jQueryベースのスライダープラグインで、Webサイトにスライダーやカルーセルを簡単に追加することができます。レスポンシブデザインにも対応しており、様々なオプション設定が可能な非常に柔軟性の高いプラグインです。

slickの主な特徴

レスポンシブデザインに完全対応
IE8以上のすべてのブラウザで動作
豊富なオプション設定で柔軟にカスタマイズ可能
HTMLマークアップ、1行のjQueryコード、CSSでシンプルに実装
ユーザーのスワイプ操作にも対応
アクセシビリティに配慮した設計
GitHubで公開されているオープンソースのプラグイン

slickは多機能でありながらシンプルな実装が可能な、Webデザイナーやフロントエンドエンジニアに人気のjQueryプラグインです。

slickの導入手順

slickを導入するには、公式サイトからファイルをダウンロードするか、CDNを利用する方法があります。

■ファイルをダウンロードして利用する場合

公式サイトの「Download Now」ボタンからファイルをダウンロード
「slick」フォルダをプロジェクトに追加
HTMLファイルにslick.cssとslick-theme.cssを読み込む
jQueryとslick.min.jsを読み込む（jQueryを先に読み込むこと）

■CDNを利用する場合以下のコードをHTMLファイルの<head>タグ内と</body>タグ前に追加します。

<head>タグ内

html

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

</body>タグ前

html

<!-- JS -->
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

以上の手順でslickに必要なファイルを読み込めば、プロジェクトでslickを利用する準備は完了です。あとはHTMLにスライダーのマークアップを追加し、jQueryでslickを呼び出すだけで、簡単にスライダーを実装することができます。

jQueryを使いたくない場合はSwiperを利用するのがおすすめです。

slickの基本的な使い方をマスターしよう！

slickを使ってスライダーを実装するには、HTMLでスライド要素のマークアップを行い、jQueryでslickを呼び出して初期化します。ここでは、シンプルなスライダーを例に、基本的な使い方を解説します。

HTMLの書き方

スライド要素は、以下のようにマークアップします。

html

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

スライダーのコンテナとなる要素に任意のクラス名（例：slider）を付け、その直下の子要素がスライドとなります。スライドの中には画像やテキストなど、任意のコンテンツを入れることができます。

マークアップ時の注意点として、ul要素とli要素を使う場合は、slickが自動的に生成する要素との兼ね合いでHTMLのバリデーションエラーが発生する可能性があります。そのため、div要素を使ってマークアップを行うのがおすすめです。

JavaScriptでの設定

HTMLのマークアップが完了したら、jQueryを使ってslickを呼び出し、スライダーを初期化します。基本的なコードは以下のようになります。

javascript

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

「$(document).ready」は省略形で「$(function() { … });」と記述することもできます。

「.slider」の部分は、スライダーのコンテナ要素のクラス名に合わせて変更してください。これだけでスライダーの実装は完了です。とてもシンプルですね。

スライダーの動作をカスタマイズしたい場合は、slickメソッドに引数としてオブジェクトを渡し、オプションを指定します。

javascript

$(document).ready(function(){
$('.slider').slick({
autoplay: true,
dots: true,
// その他のオプション
});
});

よく使われるオプションには以下のようなものがあります。

autoplay：自動再生のオン/オフ
autoplaySpeed：自動再生の速度
dots：ページネーションの表示/非表示
arrows：前後の矢印ボタンの表示/非表示
fade：スライドの切り替えアニメーション
speed：スライドの切り替わる速度

オプションを活用することでさまざまな動作のスライダーを簡単に作成できます。

slickをカスタマイズ！よく使うオプション設定

slickにはさまざまなオプションが用意されており、基本的な設定から細かいカスタマイズまで柔軟に対応できます。
ここでは特によく使われる設定について、効果や使い方を解説していきます。

表示に関するオプション

autoplay

自動再生のオン・オフを設定します。trueにすると、指定した間隔でスライドが切り替わります。

javascript

$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 3000 // 3秒ごとに切り替え
});

dots

ページ送りのドット（ページネーション）の表示・非表示を設定します。

javascript

$('.slider').slick({
  dots: true
});

dotsとarrowsを組み合わせることで、ユーザビリティの高いナビゲーションを実現できます。

arrows

左右の矢印ボタンの表示・非表示を設定します。

javascript

$('.slider').slick({
  arrows: false // 矢印を非表示に
});

ページ送りボタンとナビゲーションドットのデザインは、slickのデフォルトスタイルがあらかじめ設定されていますが、CSSをカスタマイズすれば自分好みの見た目に変更できます。

slidesToShow

一度に表示するスライドの枚数を指定します。後の「レスポンシブ対応」の章で詳しく解説しています。

動きに関するオプション

autoplaySpeed

自動再生時のスライド切り替え速度をミリ秒単位で指定します。

自動再生は画像ギャラリーやプロモーションスライダーなど、ユーザーアクションを待たずに情報を提供したい場合に役立ちます。一定時間が経過したらスライドが自動で切り替わるため、ユーザーの注意を引きつけやすくなります。

javascript

$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 5000 // 5秒ごとに切り替え
});

speed

スライドの切り替わる速度をミリ秒単位で指定します。

javascript

$('.slider').slick({
  speed: 1000 // 1秒かけてゆっくり切り替わる
});

fade

スライド切り替え時のエフェクトを、スライド（デフォルト）からフェードに変更します。
フェードを使うときの注意点は「4.1」で解説します。

javascript

$('.slider').slick({
  fade: true,
  cssEase: 'linear' // フェード時のイージングを指定
});

応用的なオプション

centerMode

両端が見切れた状態で、中央のスライドを強調表示します。後で詳しく解説しています。

javascript

$('.slider').slick({
  centerMode: true,
  centerPadding: '10%' // 見切れる幅を%で指定
});

asNavFor

2つ以上のスライダーを同期させるときに使います。サムネイル付きスライダーなどに応用できます。

javascript

$('.slider').slick({
  asNavFor: '.thumbnail' // サムネイル用のスライダーと同期
});

slickのオプションは組み合わせ次第でさまざまな表現が可能です。
それぞれの効果や相性を理解して、目的に合ったオプション設定を見つけていきましょう。

スライドの切り替えエフェクトを変更しよう

スライドの切り替え方は、横にスライドするのがデフォルトですが、状況に応じて変更したいこともあるでしょう。
ここではよく使われる切り替えエフェクトの設定方法を見ていきます。

フェードイン・アウトでスライドを切り替える

通常のスライド切り替えはスライドが左右にスライドしますが、fadeオプションを使えばフェードイン・アウトのアニメーションに変更できます。写真ギャラリーなどでは印象的な切り替え演出ができます。

javascript

$('.slider').slick({
  fade: true // フェードイン・アウトのアニメーション
});

ただし、fade: trueを設定すると、slidesToShow・slidesToScrollは強制的に1になるため注意が必要です。
複数画像を同時に表示・スクロールさせたい場合、フェードは使えません。

フェードアニメーションはスムーズで目に優しいため、写真やイラストなどの切り替え表示に適しています。一方で違和感のある場面もあるので、用途に合わせて適切に使い分けましょう。

スライド切り替えのスピードを調整する

スライド切り替えのスピード感は見た目の印象を大きく左右するため、調整が重要です。スピードが速すぎるとあっという間に切り替わり情報を訴求しづらくなり、遅すぎると冗長で退屈に感じられます。

speedオプションを使えば、切り替えアニメーションの時間をミリ秒単位で指定できます。またcssEaseオプションを使えば、イージングアニメーションのパターンを変更できます。

javascript

$('.slider').slick({
  speed: 800, // 切り替えアニメーションの時間を800ms
  cssEase: 'linear' // イージングをリニアに設定
});

適切な切り替えのスピード感は製品やサービス、ブランドイメージにも影響します。試行錯誤を重ねながら最適な設定を探ってみましょう。フェードやスピード、イージングなど細かな調整を施すことで、ユーザーに的確にメッセージを訴求できるスライダーが作れます。

スマホ表示に最適化！レスポンシブ対応のコツ

スライダーは画面サイズに応じてレイアウトを変更する必要があり、レスポンシブ対応は欠かせません。slickには画面幅ごとにスライドの表示方法を細かく設定できるオプションが用意されているので、適切に設定することでスマートフォンからデスクトップまであらゆる端末で最適化されたスライダーを実現できます。

画面幅に応じてスライド表示を変更する

responsiveオプションとbreakpointを組み合わせることで、画面幅に応じてスライドのレイアウトを変更できます。breakpointには画面の最大幅を指定し、その値以下になったタイミングでsettings内のオプションが適用されます。

javascript

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

この例では、画面幅768px以下では3枚、480px以下では1枚表示するよう設定しています。
デバイスごとの表示枚数や、ブレイクポイントはプロジェクトに合わせて調整しましょう。

中央寄せ表示で前後のスライドをチラ見せする

centerModeオプションとcenterPaddingオプションを使えば、中央に表示されるスライドの前後をチラ見せした状態で表示できます。ファッションアイテムなど商品をスライドで表示する場合に効果的な表示方法です。

javascript

$('.slider').slick({
  centerMode: true, // 中央寄せ表示
  centerPadding: '100px', // 前後のスライドの見切れ幅
});

中央のスライドを主役に見せつつ、前後のスライドの一部も見えるようにすることで、ユーザーの興味関心を引きつけられます。前後のスライドにチラ見せすることで、スムーズなスライド切り替えを促せます。

slickにはこのようにレスポンシブ対応に役立つオプションが多数用意されています。スマートフォンとデスクトップで最適なビューイングを実現するため、ブレークポイントを適切に設定し、スライド表示方法を変更する必要があります。様々なオプションを組み合わせることで、あらゆる端末で美しくスタイリッシュなスライダーを実装できるはずです。

slickのオプション一覧

ここまで代表的なオプションを見てきましたが、slickにはまだまだ多くのオプションがあります。
本章ではslickのオプションを網羅的に紹介します。気になる機能を探してみてください。

オプション名	型	初期値	説明
accessibility	boolean	true	ナビゲーションのアクセシビリティを有効にする
adaptiveHeight	boolean	false	スライドの高さを自動調整する
autoplay	boolean	false	自動再生を有効にする
autoplaySpeed	int	3000	自動再生の速度（ミリ秒）
arrows	boolean	true	前後の矢印を表示する
asNavFor	string	null	連携するスライダーのセレクタ
appendArrows	string	$(element)	矢印の生成位置を変更する
appendDots	string	$(element)	ドットの生成位置を変更する
prevArrow	string	`<button type="button" class="slick-prev">Previous</button>`	前への矢印をカスタマイズする
nextArrow	string	`<button type="button" class="slick-next">Next</button>`	次への矢印をカスタマイズする
centerMode	boolean	false	中央揃えモードを有効にする
centerPadding	string	’50px’	中央揃え時のパディング（px,%）
cssEase	string	‘ease’	CSSイージングを指定する
dots	boolean	false	ドットインジケーターを表示する
dotsClass	string	‘slick-dots’	ドットのクラス名
draggable	boolean	true	マウスドラッグを有効にする
fade	boolean	false	フェードモードを有効にする
focusOnSelect	boolean	false	スライド選択時に自動フォーカスする
infinite	boolean	true	無限ループを有効にする
initialSlide	int	0	初期表示するスライド番号
lazyLoad	string	‘ondemand’	画像の遅延ロードのタイミング
pauseOnFocus	boolean	true	フォーカス時に自動再生を停止する
pauseOnHover	boolean	true	ホバー時に自動再生を停止する
pauseOnDotsHover	boolean	false	ドットホバー時に自動再生を停止する
respondTo	string	‘window’	レスポンシブ動作の基準要素
responsive	array	null	レスポンシブ設定のブレークポイント
rows	int	1	縦方向のスライド数
slide	string	”	スライドの要素
slidesPerRow	int	1	横方向のスライド数
slidesToShow	int	1	表示するスライド数
slidesToScroll	int	1	スクロールするスライド数
speed	int	300	スライドアニメーションの速度（ミリ秒）
swipe	boolean	true	タッチスワイプを有効にする
swipeToSlide	boolean	false	スワイプ時に任意のスライドに移動できるようにする
touchMove	boolean	true	タッチ操作を有効にする
touchThreshold	int	5	タッチの閾値
useCSS	boolean	true	CSSアニメーションを使用する
useTransform	boolean	true	CSS transformを使用する
variableWidth	boolean	false	スライド幅の自動計算を無効にする
vertical	boolean	false	縦方向へのスライドを有効にする
verticalSwiping	boolean	false	縦スワイプを有効にする
rtl	boolean	false	右から左へのスライドを有効にする
zIndex	number	1000	スライダーのz-index

一覧を見ると、slickのオプションがいかに豊富かがわかります。
本記事で紹介したもの以外にも、状況に応じて使えそうなオプションがたくさんありますね。
ぜひ一通り眺めて、色々試してみてください。うまく活用すれば、より細やかなカスタマイズが可能になるはずです。

slickの実用的なサンプルコード集

ここまでslickの基本的な使い方やオプションの設定方法を解説してきました。次に、よりリアルな活用例をサンプルコードとともにご紹介します。これらのサンプルを参考にすれば、見栄えの良いスライダーをサイトに実装できるはずです。

サムネイル付きスライダーを作成する

商品ページなどでよく使われるサムネイル付きのスライダーは、asNavForオプションを使って簡単に実装できます。このオプションを使うと、メインのスライダーとサムネイルのスライダーの2つを連携させることができます。

【サンプルコード】

html

<!-- メインスライダー -->
<div class="main-slider">
  <div><img src="image1.jpg" alt=""></div>
  <div><img src="image2.jpg" alt=""></div>
  ...
</div>

<!-- サムネイルスライダー -->
<div class="thumb-slider">
  <div><img src="thumb1.jpg" alt=""></div>
  <div><img src="thumb2.jpg" alt=""></div>
   ...
</div>

javascript

$('.main-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.thumb-slider'
});

$('.thumb-slider').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.main-slider',
  focusOnSelect: true
});

メインスライダーとサムネイルスライダーを別々のHTMLコンテナに入れ、asNavForオプションでお互いを紐付けます。サムネイルをクリックするとメインの画像が切り替わる動作になります。

複数のスライダーを同期させる

1つのページに複数のスライダーを設置する場合、それぞれのスライダーを同期させたい場面が出てくるかもしれません。このようなニーズにも対応できるのがslickの強みです。

【サンプルコード】

html

<!-- スライダー1 -->
<div class="slider-1">
  <div><img src="img1.jpg" alt=""></div>
  <div><img src="img2.jpg" alt=""></div>
  ...
</div>

<!-- スライダー2 -->
 <div class="slider-2">
  <div><img src="img1.jpg" alt=""></div>
  <div><img src="img2.jpg" alt=""></div>
  ...
</div>

javascript

var $slider1 = $('.slider-1');
var $slider2 = $('.slider-2');

$slider1.slick({
  slidesToShow: 1
});

$slider2.slick({
  slidesToShow: 3,
  asNavFor: $slider1
});

2つのスライダーを用意し、一方をメインのスライダー、もう一方をサムネイル的な役割のスライダーにします。asNavForオプションを使えば、メインスライダーの画像を動かすと自動的にサムネイルスライダーも連動する動きになります。

これらのサンプルを参考にしながら、サイトのユースケースに合わせてカスタマイズしていけば、魅力的なスライダーづくりができるはずです。思い描いた動きが実現できない場合は、slickの公式ドキュメントやオンラインで公開されている実例を参考にすると良いでしょう。

slickのよくある質問とトラブルシューティング

slickは非常に便利なツールですが、初めて使う人は様々な疑問や課題に直面するかもしれません。ここでは、slickを使う際によくある質問とトラブルシューティングについて解説します。

slickが動かない!原因と対処法

slickを実装したのにスライダーが動かない、という問題は意外と多く見られます。原因としては大きく分けて3つのパターンが考えられます。

ファイルの読み込み順が間違っている slickを機能させるには、jQuery本体のファイルとslick用のJavaScriptファイル、CSSファイルを正しい順序で読み込む必要があります。推奨する読み込み順は以下の通りです。

html

<link rel="stylesheet" href="slickフォルダ/slick.css">
<link rel="stylesheet" href="slickフォルダ/slick-theme.css">
<script src="jQueryファイル"></script> 
<script src="slickフォルダ/slick.min.js"></script>

JavaScriptコードの記述ミス slickの初期化コードに間違いがある可能性もあります。特に要素のセレクタ部分（’.sliderクラス’）でミスが起こりがちです。開発者ツールでコンソールを確認し、エラーが出ていないかチェックしましょう。
slickファイルの読み込みエラー
ファイルパスが正しくない、ファイル名が違う、ファイルが壊れている、などの理由でslickのファイルが正常に読み込めていないことがあります。この場合は読み込んでいるファイルのURLをよく確認しましょう。

このようにslickが動かない原因はさまざまですが、一つずつ入り口から見直していけばおそらく解決できるはずです。

スライドのサイズがおかしい時の直し方

slickでスライドのサイズ設定を間違えると、想定していないレイアウトになってしまいます。サイズ調整は基本的にCSSで行いますが、slickのオプションでも一部調整できます。

【サイズ調整のポイント】

オプションの slidesToShow と slidesToScroll でスライド数を設定できます。また、variableWidth を有効にすればスライドの幅を個別に設定可能になります。
CSSの width プロパティでスライド要素の幅を指定します。通常は親要素の幅に合わせて 100% と設定しますが、固定値でも構いません。
object-fit プロパティを使えば、画像がスライド要素の中でちょうど良い大きさに納まります。 object-fit: cover で画像が途切れずにスライド領域にフィットする設定ができます。
padding や margin を活用すると、スライド間のスペーシングを調整できます。

最初から細かいサイズ設定をすべてCSSで記述するのは手間がかかります。まずはslickのオプションで大まかなサイズを決め、細かい調整はCSSで行うと良いでしょう。開発者ツールを使いながら見た目を確認し、試行錯誤を重ねることが大切です。

DeLT WebInsider編集部

DeLT WebInsider編集部は、Web開発、モバイルアプリ、生成AI、ブロックチェーンなど、先進的なテクノロジー分野における実践的な知見を発信しています。システム開発会社DeLTの実務経験に基づき、最新のWeb技術やプログラミング、企業のWebサイト運営に必要な専門知識、エンジニアのキャリア形成まで、確かな情報をお届けすることで、読者の皆様の業務力向上とキャリアアップをサポートしています。

slick（スリック）の使い方とオプション設定の完全ガイド！基本から応用まで丁寧に解説

slickとは？特徴と導入方法を解説！

slickの主な特徴

slickの導入手順

slickの基本的な使い方をマスターしよう！

HTMLの書き方

JavaScriptでの設定

slickをカスタマイズ！よく使うオプション設定

表示に関するオプション

autoplay

dots

arrows

slidesToShow

動きに関するオプション

autoplaySpeed

speed

fade

応用的なオプション

centerMode

asNavFor

スライドの切り替えエフェクトを変更しよう

フェードイン・アウトでスライドを切り替える

スライド切り替えのスピードを調整する

スマホ表示に最適化！レスポンシブ対応のコツ

画面幅に応じてスライド表示を変更する

中央寄せ表示で前後のスライドをチラ見せする

slickのオプション一覧

slickの実用的なサンプルコード集

サムネイル付きスライダーを作成する

複数のスライダーを同期させる

slickのよくある質問とトラブルシューティング

slickが動かない!原因と対処法

スライドのサイズがおかしい時の直し方

最新技術で実現する、次世代のデジタルソリューション

おすすめのタグ

関連記事

CSS Flexboxの完全ガイド：基礎から実践まで学ぶ最新レイアウト技術

CSSグラデーションの使い方完全ガイド：初心者でも簡単に実装できる方法を解説

React Splideで実現する！スムーズで軽量なスライダーをReactプロジェクトに簡単実装

CloudflareのパブリックDNSリゾルバ1.1.1.1とは？各デバイスの設定方法まで徹底解説

Cloudflare Images完全ガイド：画像最適化と配信を効率化する5つの秘訣

React FAST Marqueeでスムーズな無限スクロールテキスト（マーキー効果）を実装しよう