【jQuery】slickの使い方とカスタマイズ・オプションの解説

「Webサイトにスライダーを実装したい！」
「カスタマイズもしたい！」

そんなときに使えるのが「slick」というスライダーを作成するプラグインです。
この記事では「slickの使い方とオプション」について詳しく解説します。
さらに記事の後半では「スライドショー」「カルーセルスライダー」「レスポンシブ」の3つのカスタマイズ事例も紹介していきます！

slickとは

slickとはスライドショーが作れるjQueryのプラグインです。オプションの種類が豊富で、レスポンシブにも対応しているのが特徴です。

slickはスライダー系のプラグインの中でも幅広く使われていて、slickを使った応用事例が数多くあります。

slickの使い方

ここからはslickを使うための準備と、基本的な使い方について解説します。

slickの導入方法

slickの導入方法は2パターンあります。

1. ローカルファイルにダウンロード
2. CDNを利用する

slickを導入する場合はCDNを利用するのが簡単です。ファイルをダウンロードしなくても公式サイトの記述をheadタグやbodyタグにコピー&ペーストするだけで使えるからです。

ただし、自社のサーバーにslickファイルを保存し利用する場合はローカルファイルにダウンロードしましょう。

1. ローカルファイルをダウンロードする場合

slickの公式サイトのメニュー「get it now」をクリックすると、ダウンロードファイルやCDNファイルが記述してあるセクションに移動します。

「Download Now」よりslickのファイルをインストールします。

ダウンロードするとさまざまなファイルが入っていますが、必要なのは「slick.css」「slick-theme.css」「slick.min.js」です。ダウンロードしたファイルはslickフォルダを作成してファイルを核のします。またfontsフォルダも格納します。

そして下記のようにheadタグに記述します。

<!-- css -->
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">
<link rel="stylesheet" href="style.css">
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>
<script src="main.js"></script>

2.CDNを使う場合CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称で、外部ファイルをリンク1つで使用することができる仕組のことです。CDNも下記のようにheadタグの中に記述します。

<!-- css -->
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
 <link rel="stylesheet" href="style.css">
<!-- js -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 <script src="main.js"></script>

ローカルファイルをダウンロードする場合もCDNを使う場合も共通して以下の順番でファイルを読み込む必要があります。

1. jQueryの読み込み
2. slickの読み込み
3. メインで使用するJavaScriptの読み込み

最新のCDNは先ほどと同様にslickの公式サイトのメニュー「get it now」より最新のcodeを取得することができます。

今回はCDNを使う方法で解説していきます。

slickの基本構文

slickの基本書式は下記になります。

基本書式

$("セレクタ").slick();

slickは１行の記述だけで、カルーセルパネルを作れます。

slickの基本サンプル

 <ul class="slide-items">
   <li><img src="images/dummy.png" alt=""></li>
   <li><img src="images/dummy2.jpg" alt=""></li>
   <li><img src="images/dummy3.jpg" alt=""></li>
 </ul>

.slide-items {
  width: 100%;
  height: 100%;
}

.slide-items img {
  width: 100%;
  object-fit: cover;
}

 $(".slide-items").slick();

出力結果

slickのオプション

slickには多数のオプションが用意されています。

オプションでは以下のような設定をすることができます。

• レスポンシブで表示する画像の枚数を変更
• インジケーターの表示、非表示
• スライドを自動再生
• スライドの切り替え時間を調整
• 矢印ボタンの追加
• スライド切り替え時にフェードイン、フェードアウト...etc

オプションの使い方は、下記になります。

オプションの記述方法

$("セレクタ").slick({
  オプション名: 値,
  オプション名: 値
});

オプションを複数使用する場合は、上記のように ,（カンマ）を忘れないようにしましょう。

制作で使われるオプションを2,3個ずつまとめて紹介します。

オプション：autoplay,autoplaySpeed,infinite

autoplay、autoplaySpeed、infiniteオプションについて解説します。

3つのオプションを使用した例を紹介します。

$(".slide-items").slick({
  autoplay: true, // 自動再生
  autoplaySpeed: 4000, // 再生速度（ミリ秒設定） 1000ミリ秒=1秒
  infinite: true, // 無限スライド
});

出力結果

今回のサンプルではオプションにより以下3つの設定を行いました。

1. autoplay: trueで自動再生
2. autoplaySpeed: 4000で4秒ごとにスライド
3. infinite: trueで無限に再生

オプション：fade,cssEase,speed

fade、cssEase、speedオプションについて解説します。

3つのオプションを使用した例を紹介します。

$(".slide-items").slick({
    autoplay: true, // 自動再生
    fade: true, // スライドをフェードイン・フェードアウト
    cssEase: 'linear',// アニメーション
    speed: 600, // フェードアニメーションの速度設定
});

出力結果

今回のサンプルではオプションにより以下3つの設定を行いました。

1. fade：trueでスライド時にフェードイン
2. cssEase：linearでCSSイージングアニメーション
3. speed：フェードアニメーションの速度を600に設定

オプション：slidesToShow,slidesToScroll

slidesToShow、slidesToScrollオプションについて解説します。

2つのオプションを使用した例を紹介します。

$(".slide-items").slick({
  autoplay: true, // 自動再生
  slidesToShow: 2, // 表示するスライド枚数
  slidesToScroll: 1,// スライドする数
});

出力結果

今回のサンプルではオプションにより以下2つの設定を行いました。

1. slidesToShow：表示枚数を2に設定
2. slidesToScroll：スライドする枚数を1に設定

オプション：centerMode,centerPadding

centerMode、centerPaddingについて解説します。

2つのオプションを使用した例を紹介します。

$(".slide-items").slick({
  autoplay: true, // 自動再生
  centerMode: true,// 前後スライドを部分表示
  centerPadding: '20%',// 両端の見切れるスライド幅
});

表示結果

今回のサンプルではオプションにより以下2つの設定を行いました。

1. centerMode：tureで前後のスライドを部分的に表示
2. centerPadding：両端の見切れるスライド幅を20%で指定

センターモード時はslidesToShowを1以上に設定しても自動的に1になります。

オプション：dots,arrows

dots,arrowsについて解説します。

2つのオプションを使用した例を紹介します。

$(".slide-items").slick({
  autoplay: true, // 自動再生
  arrows: true, // 矢印
  dots: true, // インジケーター
});

.slide-items {
  width: 50%;
  height: 50%;
  margin: auto;
}
.slide-items img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slick-prev:before,
.slick-next:before {
  color: black;
}
.slick-dots li button:before {
  font-size: 18px;
  top: 6px;
}

出力結果

今回のサンプルではオプションにより以下2つの設定を行いました。

1. dots：trueでスライド下部にインジケーターを表示
2. arrows：trueで矢印を表示

dotsはスライド下部に表示されている丸い点です。

arrowsとdotsは、CSSを適用してデザインをカスタマイズすることができます。

slickの定番、カルーセルスライダーのカスタマイズ

カルーセルスライダーとは、横にスクロールするスライドギャラリーのことです。

3つの画像をスライダー表示させる場合は下記になります。

<ul class="slide-items">
   <li><img src="images/dummy.png" alt=""></li>
   <li><img src="images/dummy2.jpg" alt=""></li>
   <li><img src="images/dummy3.jpg" alt=""></li>
   <li><img src="images/dummy.png" alt=""></li>
   <li><img src="images/dummy2.jpg" alt=""></li>
   <li><img src="images/dummy3.jpg" alt=""></li>
 </ul>

.slide-items {
  width: 100%;
  display: flex;
  max-width: 80%;
  margin: auto;
}

.slide-items li {
  height: auto;
  margin-right: 10px;
  margin-left: 10px;
}

.slide-items img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-dots {
  left: 50%;
  transform: translateX(-50%);
}

$(".slide-items").slick({
  autoplay:true,
  slidesToShow:3,
  infinite:true,
  slidesToScroll:1,
});

出力結果

画像間の余白はmarginを適用しています。

dotsオプションを適用すると、dotsのHTMLとCSSが出力されます。dotsの位置はpositonで指定されているのでleftとtransformで中央寄せにしています。

slickのスライドショー

スライドショーの場合は下記になります。

$(".slide-items").slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  dots: true,
  fade: true,
  cssEase: 'linear',
  speed: 600,
});

出力結果

slickのレスポンシブ

slickではオプションでレスポンシブの設定をすることができます。例えばSP（モバイル）表示ではスライドショー、PC表示ではカルーセルスライダーと設定することができます。

$('.slide-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  dots: true,

  responsive: [{
   breakpoint: 768, // ブレイクポイントを指定
    settings: {
     slidesToShow: 2,
     speed: 600,
    },
   },
  {
   breakpoint: 480,
    settings: {
     slidesToShow: 1,
     centerMode: true,
     centerPadding: '20%',
   },
  },
 ]
});

出力結果

レスポンシブ設定は複数設定することができます。

slickが動かないときの対処法

slickが動かない場合は以下の理由が考えられます。

• slickのCDNファイル、もしくはダウンロードしたファイルが正しく読み込まれていない
• ファイルの読み込み順が逆になっている
• JavaScriptファイルでの記述ミス

例えば、下記のようにjQueryのCDNファイルとslick.min.jsファイルの読み込み順が逆になっていると動きません。

<script src="slick/slick.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- jQueryを先に読み込ませる -->

まとめ

slickはオプションとCSSを組み合わせてさまざまなカスタマイズすることができます。カスタマイズの幅がありすぎて扱いが難しいところがあります。しかし基本的なカスタマイズは、この記事で紹介したオプションでも制作の現場で通用するレベルです。

今回紹介しきれなかったオプションはまだまだありますので、さらにオプションを追加してオリジナルのスライドショーを制作してみましょう！

slickまとめ

• slickはオプション設定が豊富
• オプションでレスポンシブ設定できる
• CSSでデザインを変更することができる

\ 完全無料のプログラミンスクール /

30日間で学びきれる
プログラミングスクールZeroPlus Gate

完全無料のプログラミングスクール 30日間でWebサイトが作れるようになる 50本以上の動画教材をいつでも視聴可能 毎週専属メンターとの面談で悩みを解決 現役エンジニアに質問し放題

公式サイトはこちら

\ 学んだことをSNSでシェアしよう /

facebook

Twitter

LINE

ハテブ

Pocket

URL
copy

コピー