ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > JavaScript > 【jQuery】slickの使い方とカスタマイズ・オプションの解説

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

JavaScript

2022/03/15

2023/06/14

slick 使い方 記事サムネイル

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

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

この記事で身につく内容
  • slickの使い方
  • slickのオプションの使い方

ZeroPlus Gateについて

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

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 ダウンロード画像

ダウンロードするとさまざまなファイルが入っていますが、必要なのは「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を取得することができます。

slick CDN画像

今回は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オプションについて解説します。

オプション名値（赤字は初期値）概要
autoplaytrue/false自動再生
autoplaySpeed3000再生速度（ミリ秒設定：1000ミリ秒=1秒）
infinitetrue/false無限再生

 

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オプションについて解説します。

オプション名値（赤字は初期値）概要
fadetrue/falseスライドの表示をフェードイン、フェードアウトで切り替え。
cssEaseeaseアニメーションイージングの設定
speed300スライド、フェードアニメーションの速度を設定

 

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オプションについて解説します。

オプション名値（赤字は初期値）概要
slidesToShow1表示するスライドの枚数を設定
slidesToScroll1一度にスクロールするスライドの数を設定

 

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

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

出力結果

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

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

 

オプション：centerMode,centerPadding

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

オプション名値（赤字は初期値）概要
centerModetrue/falseスライドを中心にして前後のスライドを部分的に表示。
centerPaddingtrue/false両端の見切れるスライド幅（ピクセル、もしくは%指定）

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

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

表示結果

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

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

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

 

オプション：dots,arrows

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

オプション名値（赤字は初期値）概要
dotstrue/falseスライド下部にインジケーターを表示
arrowstrue/false矢印を表示

 

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を適用してデザインをカスタマイズすることができます。

ZeroPlusgate50教材の動画

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でデザインを変更することができる
ZeroPlus Gateについて

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

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

FacBook
Twitter
LINE
はてブ
PPocket

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて
ZeroPlus Gateについて

あなたの目的に合わせた２つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

記事のアイキャッチ画像

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

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

記事のアイキャッチ画像

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから