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

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

slickの主な特徴

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

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

slickの導入手順

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

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

  1. 公式サイトの「Download Now」ボタンからファイルをダウンロード
  2. 「slick」フォルダをプロジェクトに追加
  3. HTMLファイルにslick.cssとslick-theme.cssを読み込む
  4. 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を利用するのがおすすめです。

関連の記事
Swiperの使い方を初心者向けに徹底解説！基本からカスタマイズまで
フロントエンド

他にもとても軽量なGlide.jsというライブラリもあるのでこちらも候補に挙がるでしょう

関連の記事
Next.jsでGlide.jsを使ったスライダーを実装する方法
Next.jsフロントエンド

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には豊富なオプションが用意されており、これらを使ってスライダーの見た目や動作をカスタマイズすることができます。ここでは、よく使われるオプションの設定方法を解説します。

スライドの表示枚数を変更する

slickでは、slidesToShowオプションを使えば表示するスライドの枚数を変更できます。デフォルトでは1枚ずつスライドが表示されますが、横に複数のスライドを並べて表示したい場合はこのオプションが便利です。

javascript
$('.slider').slick({
  slidesToShow: 3 // 横に3つのスライドを表示
});

slidesToShowに指定する値によって、表示されるスライドの枚数が変わります。スマートフォンのように画面幅が狭い端末の場合はスライド1枚ずつ表示して、PCのようにある程度の画面幅がある場合は複数のスライドを横に並べて表示する、といったレスポンシブ対応も可能です。

ページ送りボタンやナビゲーションを表示・非表示にする

slickにはスライド切り替え用のページ送りボタン(矢印ボタン)とナビゲーションドット(スライド下部の丸い点)が用意されています。arrowsオプションとdotsオプションを使えば、これらの表示・非表示を切り替えられます。

javascript
$('.slider').slick({
  arrows: true, // 前へ・次へのページ送りボタンを表示
  dots: false // ナビゲーションドットを非表示
});

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

自動再生の設定をする

slickにはスライドを自動で切り替える機能が備わっています。autoplayオプションをtrueに設定すると自動再生が有効になり、autoplaySpeedオプションで自動再生の間隔時間をミリ秒単位で指定できます。

javascript
$('.slider').slick({
  autoplay: true, // 自動再生を有効化
  autoplaySpeed: 5000 // 5秒ごとにスライド切替
});

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

slickにはこのように多彩なオプションが用意されており、組み合わせ方次第でさまざまな動作やデザインのスライダーを作ることができます。シーンに合わせてオプションを設定することで、より使いやすく魅力的なスライダーを実装できます。

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

スライドの切り替えアニメーションは、ユーザーにインパクトを与えるだけでなく、コンテンツの見せ方に大きな影響を与えます。slickでは切り替えアニメーションをカスタマイズするためのオプションが用意されています。

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

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

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

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

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

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

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

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

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

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

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

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

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

javascript
$('.slider').slick({
  slidesToShow: 3, // デフォルトは3つ並べて表示
  responsive: [
    {
      breakpoint: 768, // 768px以下になったら
      settings: {
        slidesToShow: 1 // スライド1つだけ表示
      }
    }
  ]
});

このようにブレークポイントを複数設定することで、さまざまな画面サイズに対応できます。スマートフォンでは1つずつスライドを表示し、タブレットではややスライド数を増やし、デスクトップではさらにスライド数を増やす、といった具合です。

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

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

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

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

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つのパターンが考えられます。

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

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

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

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

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

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

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