jQueryのスライダー「slick」の使い方・オプションを徹底解説

今回は、jQueryのスライダー「slick」の使い方とオプションを徹底的に解説します。

インターネット上の解説が細いとこまで行き届いてない感じがしたので、当サイトでは初心者の方でも理解出来るように超基礎の基礎から見ていきます。

slickとは？

slickはjQueryベースの、スライダーを作成するためのプラグインです。

jQueryとは、JavaScriptを使いやすくまとめたライブラリです。要するにJavaScriptでスライダーを作成するデータです。

jQueryとは？基本的な扱い方を分かりやすく簡潔に解説

今回はWEBサイトの制作でよく聞くjQueryについての説明と、その扱い方について解説します。jQueryは今も今後もWEB制作で必須な要素なので必ず覚えておきましょう。

kt-life.net

2020.12.31

slickを使用すると、以下の様なカルーセルスライダーが超簡単に実装する事が出来ます。

WEB制作の現場では頻繁に使用するプラグインなので必ず覚えておきましょう。

slickの使い方 │ 下準備 ① ファイル構成

まずはslickを使用するための下準備（ファイルの準備）をします。

初めに、以下のリンクからslickのファイルをダウンロードして下さい。

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

URLをクリックすると以下の様なページに飛びますのでグロナビの「get it now」をクリックして「Download Now」を押して下さい。ここでslickの全ファイルをダウンロード出来ます。

ダウンロードしたファイルの中には以下の様なファイルが入っています。その中の「slick」フォルダの中身を使用します。

「slick」フォルダをそのままWEBサイトの環境にアップしても良いですが使用するファイルは決まっている（内容が被っている）ので、今回使用する以下の4つのファイル以外は削除でOKです。

先程の4つのファイルをWEBサイトの環境にアップロードします。今回の場合は「slick」フォルダに必要なファイルを入れてまとめています。
＊slick-theme.cssとfontsフォルダは同じパス内に存在していないと正常に表示されないので注意しましょう。

そしてslickのオプション設定用ファイル「common.js」とjQuery読み込み用ファイルの「jQuery.js」を用意します。（jQueryはオンラインで読み込んでもOK）

ここまでのファイルの構成は以下です。

slickの使い方 │ 下準備 ② ファイルの読み込み

次にindex.htmlで各ファイルを読み込みます。

まずはjQueryを読み込みます。これがなければ始まりません。

先程のファイル構成の場合は以下の記述でOKです。

<script type="text/javascript" src="js/jQuery.js"></script>

オンラインからjQueryを読み込む場合は以下。（Google CDNを使用）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

次にbodyの終了タグ直前で以下のslick.min.jsとオプション設定用に作成したcommon.jsを読み込みます。

<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

最後にhead内に以下のCSSを読み込みます。「styles.css」で見た目の調整を行います。CSSの読み込みの優先度の関係上、必ず以下の順番で記述して下さい。

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/styles.css">

slickの使い方 │ 基本的な使い方

ファイルの読み込みが出来たら、早速スライダーを作成していきます。その基本的な使い方を解説します。

追加・編集していくファイルは「index.html」「styles.css」「common.js」です。それ以外は存在するだけで弄りはしません。

まずは以下のコードを見て下さい。これをコピペして各々調整すれば基本は出来ています。次で解説します。

HTML

<ul class="slick01">
      <li>
        <h3>コーディング</h3>
        <img src="img/htmlcss.jpg">
        <p>UI/UXを意識したデザインを作成</p>
      </li>
      <li>
        <h3>WEBデザイン</h3>
        <img src="img/uiux.jpg">
        <p>UI/UXを意識したデザインを作成</p>
      </li>
      <li>
        <h3>プログラミング</h3>
        <img src="img/system.jpg">
        <p>利便性のあるシステムを開発します</p>
      </li>
      <li>
        <h3>マーケティング</h3>
        <img src="img/marketing.jpg">
        <p>事業拡大を目指して最適安を提案します</p>
      </li>
      <li>
        <h3>コンサルティング</h3>
        <img src="img/consaru.jpg">
        <p>あなたのお悩みを解決します</p>
      </li>
    </ul>

CSS

.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev {
  z-index: 100;
  left: 15px;
  top: 270px;
  width: 30px;
  height: 30px;
}
.slick-next {
  z-index: 100;
  right: 15px;
  top: 270px;
  width: 30px;
  height: 30px;
}
.slick-prev:before, .slick-next:before {
  color: #000;
  z-index: 9;
  font-size: 30px;
}
.slick-slide {
  transition: all ease-in-out .3s;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}
.slick-slide {
  outline: none;
}

JavaScript

$('.slick01').slick({      //{}を入れる
        autoplay: true,   //「オプション名: 値」の形式で書く
        dots: true,      //複数書く場合は「,」でつなぐ
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [{    //ここからスマホ時
          breakpoint: 768,　
          settings: {
            dots: true,
            slidesToShow: 1,
            slidesToScroll: 1,　　　　　　　　　　
            autoplay: true
           }
       }]
      });

まずHTMLでは、スライダーにしたい要素の親要素に「class=”slick01″」と任意のクラス名を付けておきます。そのクラス名をJavaScriptの1行目の$(‘.slick01’)の部分に当て嵌めます。これでHTML内のslick01の要素がスライダーになります。あとはオプションとスタイルを好きに追加・編集しているだけです。

slickの使い方 │ オプション

オプションは追加したcommon.jsに入れていきます。$(‘.slick01’).slick({ })の{}の中にオプションを追記していきます。

以下は、slickのオプションです。よく使用されるオプションはマーカーを付けておきます。

表示に関するオプション

動きに関するオプション

ユーザーの操作に関するオプション

カスタマイズのためのオプション

レスポンシブ

以上が「jQueryのスライダー「slick」の使い方・オプションを徹底解説」でした。