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

jQueryのプラグイン「slick」を利用するとWebサイトにカルーセルパネルやスライドショーを簡単に実装し、カスタマイズもできます。

そこで、この記事では「slickの使い方とオプション」について詳しく解説します。また「スライドショー」「カルーセルスライダー」「レスポンシブ」など、3種類のサンプルコードも紹介しているため、実際に手を動かしながら実装方法を学んでみましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

slickとはスライドショーを作れるjQuery

slickとはスライドショーを作れるjQueryのプラグインです。レスポンシブに対応しておりカスタマイズしやすいなどの特徴を持ち、スライダー系のプラグインの中でも多くのユーザーに使われています。

かめるん先生

似たような実装ができるものとしてSwiperもございますね！

slickの使い方

ここからはslickの使い方について解説します。

slickの導入方法

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

• ローカルファイルにダウンロード
• CDN（コンテンツデリバリーネットワーク）を利用する

このうちCDNを利用する方法が簡単です。ファイルをダウンロードせずに、公式サイトが提供するコードをheadタグやbodyタグにコピー＆ペーストするのみで利用できます。ただし、案件によってはCDNの利用が制限される場合もあります。その際は、slickファイルをローカルにダウンロードし、自社サーバーに保存して導入しましょう。

次からは、それぞれの導入方法について簡単に解説します。

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

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

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

かめるん先生

よく、「slick-theme.cssn」の読み込みを忘れてしまうことがあるので注意しましょう！

また、読み込みの順番も間違えがちなので、ここでしっかりと確認していきましょう！

そして下記のように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>

<!-- 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>

slickの公式サイトの「get it now」のセクションで最新のCDNコードをコピーできます。

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

次からは、CDNを使う方法を元にして、Slickの具体的な使い方やカスタマイズの方法を解説していきます。

slickの基本構文

slickの基本書式を紹介します。

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

slickを利用すれば1行の記述だけで、カルーセルパネルを作れます。

サンプルコード

HTMLとCSSを含めたサンプルコードを紹介します。

 <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();

かめるん先生

HTMLのどの要素をJSで書いているのかよく確認してみましょう！

出力結果

slickのオプションの使い方を解説

slickには多数のオプションが用意されており、以下のように、細かくカスタマイズできます。

オプションの記述方法

オプションの記述方法は以下のとおりです。

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

オプションを複数使用する場合は、上記のように ,（カンマ）を忘れないようにしましょう。次からはオプション名と指定できる値について解説します。

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 → 切り替え中の速度が一定　シンプルで均一な動きで切り替わる
3. speed:600→ 0.6秒かけて次のスライドへと切り替わる

slidesToShow, slidesToScroll

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

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

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

出力結果

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

1. slidesToShow:2 → 表示スライド枚数を2に設定
2. slidesToScroll:1 → スライドを一枚ずつスクロール

かめるん先生

こちらの記述はよくレスポンシブ対応などで使用しますね！

centerMode, centerPadding

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

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

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

表示結果

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

1. centerMode:true → 中央にスライドを配置して前後のスライドの一部を表示
2. centerPadding: '20%' → 両端の見切れるスライド幅を20%に指定

dots, arrows

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

$(".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には、Slickのスタイルシートでposition: absolute;が指定されており、leftとtransformを使用して中央寄せを実現しています。

position: abosolute;とposition: relative;を使った要素の配置方法や中央寄せのテクニックは以下の記事で解説しているため、併せてご覧ください。

参考記事

【CSS】position: absolute;とposition: relative;をセットで使う方法を分かりやすく解説

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でのレスポンシブはPCファーストとなっておりますので注意しましょう！

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

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

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

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

<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を使えばスライドショーやカルーセルパネルを簡単なコードで作れる

本記事ではslickの使い方やオプションを使ったカスタマイズの方法を解説しました。slickを利用すれば、JavaScriptに以下のコードを1行記述するのみで、カルーセルパネルを作れます。

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

slickはオプションとCSSの組み合わせにより、いろいろカスタマイズすることができます。

反面、できることが幅広すぎて全てを把握するのが難しいところがありますが、本記事で紹介したオプションを使ってカスタマイズできるだけでも、十分に制作現場で通用するレベルです。以下によく使われるオプションをもう一度まとめます。

これらのオプションを使いこなし、slickを使ったカルーセルパネルやスライドショーのカスタマイズをいろいろと試してみましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

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

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー