MENU
  1. ホーム
  2. プログラミング
  3. slick使い方決定版｜基本から現場で役立つカスタマイズサンプル集まで

slick使い方決定版｜基本から現場で役立つカスタマイズサンプル集まで

PR
プログラミング
jQuery slick Slider
slick使い方決定版｜基本から現場で役立つカスタマイズサンプル集まで
  • URLをコピーしました！
悩む人

jQueryでスライダーを実装したいけど、複雑なコードは書きたくない

悩む人

slickって聞いたことはあるけど、使い方がよく分からない…

この記事は、slickの導入方法から基本的な使い方、さらには現場でよく使われるカスタマイズ例やトラブル対処法までを網羅した完全ガイドです。

対象は、Web制作をしている初心者〜中級者のコーダーやデザイナー。

特に、私がこれまで実際に制作してきた、リアル制作現場でリクエストが多かったslickのカスタマイズ例も多数紹介していますので役立つこと間違いなし！

かすが

設定できることをチートシートにもしているので、ぜひブクマしてもらって逆引きレシピ的な感じで活用してください！

この記事を読めば、slickを使った高機能で美しいスライダーを短時間で実装できるようになります。実際に手を動かしながらslickの使い方を覚えましょう！

この記事でわかること
  • slickの導入方法
  • 基本的な使い方のサンプル
  • より実践的な使い方のサンプル
  • 豊富なオプション、メソッドのチートシート
  • slickが動かないときに確認すること
この記事を書いた人
  • フリーランスWEBクリエイターとして10年の活動実績。WEB制作歴トータル17年。
  • 要件定義からデザイン・コーディングまで全て担当。
  • Webサイト、LPの制作数、延べ100サイト以上。
  • 個人での売上1300万円超えを機に法人化
  • 現在は株式会社Spring DAY代表、兼クリエイティブディレクターとして現役活動中
かすがです
目次

slickとは簡単にスライダーを実装できるjQueryプラグイン

Webサイトで画像やコンテンツをスライド表示したいとき、slick（スリック）は非常に便利なjQueryプラグインです。コーディング初心者でも数行のコードで高機能なスライダーを実装できる点が大きな魅力です。

特に近年のWeb制作では、トップページやキャンペーンバナーなど、視覚的に訴求力のあるスライダーを取り入れる場面が増えています。

slickを使えば、以下のような機能が簡単に実装可能です。

  • 自動再生（オートプレイ）
  • 複数スライドの同時表示
  • サムネイル付きナビゲーション
  • ドットインジケーターや矢印での操作
  • レスポンシブ対応
  • センターモードや可変幅スライド　など

これらの機能は、JavaScriptでゼロから実装しようとすると手間や工数がかかりますが、slickならオプション設定だけで簡単にカスタマイズできます。

かすが

HTMLとCSSの基本が分かっていれば、slickを使ったスライダーの実装はそれほど難しくありませんよ！

slickの導入方法

slickの導入方法は2パターンあり、どちらも長所と短所があります。

  • 公式サイトからファイル一式をダウンロードして設置する
    →少しファイルの設置が手間ですが、制限はないので安心
  • CDN（コンテンツデリバリーシステム）で設置する
    →ファイルの設置が簡単！でも実制作ではクライアントの制限でCDNが使えない場合も…

それぞれの方法を解説します。

導入方法の解説を見る
STEP
公式サイトからファイルをダウンロード

公式サイトにアクセスして「get it now」をクリックします。

「Download Now」をクリックします。これでローカルにファイルがダウンロードされます。

STEP
必要なファイルを設置する

ダウンロードされたzipを展開すると色々なファイルがありますが必要なのは以下の4つです。

  • fonts(フォルダ)
  • slick-theme.css
  • slick.css
  • slick.min.js

結構他のブログでは「fonts」フォルダの設置が記載されていませんが、こちらがないと左右の矢印やドットインジケーターが表示されないので注意してください。

「fonts」フォルダ内のファイルは読み込む必要はなく、slick.min.jsと同じ階層に設置していれば大丈夫です。

参考までに私は「assets」フォルダの中の「slick」フォルダにファイルを設置しました。

かすが

ここは特に指定はないので、みなさんのやりやすい設置場所でOKです！読み込む際のリンクのパスだけ間違いないようにご注意を！

STEP
必要なファイルをheadタグ内で読み込む

ファイルの設置ができたら「index.html」のheadタグ内でファイルを読み込みます。

※パスは私の環境なので適宜変更してくださいね

!--css-->
<link rel="stylesheet" href="./assets/slick/slick.css">
<link rel="stylesheet" href="./assets/slick/slick-theme.css">
<link rel="stylesheet" href="./assets/css/style.css">
	
<!--js-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="./assets/slick/slick.min.js"></script>
<script src="./assets/js/main.js"></script>

7行目はjQuery本体を読み込んでいます。「slick」はjQueryで動くので読み込むのを忘れないように注意しましょう！

4行目の「style.css」と9行目の「main.js」は自分のコードを書いていく用のファイルになります。

ここでファイルを読み込む順番を間違えると動かない原因になります。まず「CSSファイルを読み込んでからJSファイルを読み込む」と覚えておきましょう。

基本的な使い方のサンプル集

さあ、slickを使う準備ができましたので使い方を解説していきます。

必要最小限の基本的な使い方

See the Pen 「slick」基本な使い方 by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;/*slickの左右の矢印がデフォルトだと白のため、背景色を変えておく*/
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 300px;
}
.slider img{
  width: 100%;
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,//自動再生を設定
    autoplaySpeed: 3000,//自動再生のスライド切り替えの時間を設定
    dots: true,//インジケーターを表示
  });
});

このサンプルを見る

フェードインにする

See the Pen 「slick」基本な使い方 by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 300px;
}
.slider img{
  width: 100%;
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,//自動再生を設定
    autoplaySpeed: 3000,//自動再生のスライド切り替えの時間を設定
    dots: true,//インジケーターを表示
    fade: true,//スライドではなくフェードインを設定
  });
});

2つの画像を表示させて2つ一緒にスライドさせる

See the Pen 「slick」複数の画像を表示 by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/05.jpg" alt="05.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/06.jpg" alt="06.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/07.jpg" alt="07.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/08.jpg" alt="08.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 600px;
}
.slider img{
  width: 100%;
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,//自動再生を設定
    autoplaySpeed: 3000,//自動再生のスライド切り替えの時間を設定
    dots: true,//インジケーターを表示
    slidesToShow:2,//中央に表示するスライド数を設定
    slidesToScroll:2,//スライド時に動く枚数を設定
  });
});

このサンプルを見る

サムネイル付き

See the Pen 「slick」サムネイル付き by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
  <!--本体-->
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="image01"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="image02"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="image03"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="image04"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/05.jpg" alt="image05"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/06.jpg" alt="image06"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/07.jpg" alt="image07"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/08.jpg" alt="image08"></div>
	</div>
  <!--サムネイル-->
	<div class="thumb">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="image01"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="image02"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="image03"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="image04"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/05.jpg" alt="image05"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/06.jpg" alt="image06"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/07.jpg" alt="image07"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/08.jpg" alt="image08"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 250px;
}
.slider_wrap img{
  width: 100%;
}
.slider{
  margin-bottom: 20px;
}
.thumb .slick-slide {
  cursor: pointer;
  padding: 0 5px;
}

jQuery

$(function() {
  $(".slider").slick({
    asNavFor:'.thumb',//thumbとリンクさせる
    autoplay: true,
  });
  $('.thumb').slick({
    arrows: false,
    asNavFor:'.slider',//sliderとリンクさせる
    focusOnSelect: true,
    slidesToShow:4,
    slidesToScroll:1
  });
});

このサンプルを見る

センターモード

See the Pen 「slick」センターモード by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="image01"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="image02"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="image03"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="image04"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/05.jpg" alt="image05"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/06.jpg" alt="image06"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/07.jpg" alt="image07"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/08.jpg" alt="image08"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 300px;
}
.slider_wrap img{
  width: 100%;
}
.slider .slick-slide{
  padding: 0 10px;
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,
    centerMode: true,//センターモードを設定
    centerPadding: '40px',//左右の見切れる幅を指定
    dots:true,
  });
});

このサンプルを見る

可変幅

可変幅にする前

See the Pen 「slick」可変幅にする前 by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

かすが

slickはデフォルトだとスライドの幅をCSSで指定しても、横幅いっぱいになるように上書きされます！

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 300px;
}
.slider .slick-slide{
  background: #fff;
  height: 150px;
  margin: 0 10px;
  padding: 10px;
  width: 200px;/*この指定は上書きされます*/
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,
    dots:true,
  });
});

可変幅を設定

See the Pen 「slick」可変幅 by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

かすが

jQueryに1行、可変幅の設定を追加しただけです！CSSの幅が上書きされず有効になってますね！

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 300px;
}
.slider .slick-slide{
  background: #fff;
  height: 150px;
  margin: 0 10px;
  padding: 10px;
  width: 200px;/*この指定が有効になります*/
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,
    dots:true,
    variableWidth: true,//可変幅を有効にする
  });
});

このサンプルを見る

垂直スライド

垂直スライドモード（ベース）

See the Pen 「slick」基本な使い方 by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider{
  margin: 0 auto;
  width: 300px;
}
.slider img{
  width: 100%;
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,//自動再生を設定
    autoplaySpeed: 3000,//自動再生のスライド切り替えの時間を設定
    dots: true,//インジケーターを表示
    vertical: true,//垂直スライドモードを設定
  });
});

垂直スライドモード(色々設定)

かすが

垂直スライドモードでも色々設定できますよ！

See the Pen 「slick」垂直スライドモード(ベース) by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider{
  margin: 0 auto;
  width: 300px;
}
.slider img{
  width: 100%;
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,//自動再生を設定
    autoplaySpeed: 3000,//自動再生のスライド切り替えの時間を設定
    centerMode: true,//センターモードを設定
    dots: true,//インジケーターを表示
    slidesToShow:2,//表示するスライド数を設定
    slidesToScroll:2,//スライド時に動く枚数を設定
    vertical: true,//垂直スライドモードを設定
  });
});

このサンプルを見る

より実践的なサンプル集（制作現場でリクエストが多い設定）

基本的なslickの使い方が分かってくると、次に求められるのが「実際の案件でよく使われるカスタマイズ方法」です。

特にWeb制作の現場では、クライアントやデザイナーからの要望に応じて、見た目や動きにこだわったスライダーの実装が求められることも少なくありません。

デザイナー

ドットのデザインを変えたい

デザイナー

矢印の位置やスタイルを変更したい

クライアント

スマホでも見やすくできる？

など、見た目や演出に一工夫を加えるニーズは非常に高いです。

ここでは、私がこれまでの実際の制作案件でリクエストが多かったslickのカスタマイズ例を中心に、即使えるコードとともに分かりやすく解説していきます。

ちょっとした設定変更やCSSの工夫で、プロっぽい仕上がりになるテクニックばかりですので、ぜひ実務に活かしてみてください。

画面幅いっぱいのスライダー

クライアント

ファーストビューで画面いっぱいに表示して

かすが

お馴染みのやつっすね！承知しました！

画面幅いっぱいのスライダー(シンプル)

slickはデフォルトで親要素の横幅いっぱいになるので、親要素が画面いっぱいの幅であれば特に設定は不要で画面いっぱいになります。

簡単なのですが、真ん中のスライドの幅を調整するのがちょっと面倒で「slidesToShow」で表示するスライドを増やしたり、「centerMode」で左右に見切れるスライドを入れることで調整する感じになります。

注意しないといけないのは左右の矢印を表示する場合は、位置や重なり順の調整が必要になります。（コードの中ににコメント書いてます）

See the Pen 「slick」画面幅いっぱいのスライダー(シンプル) by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
}
.slider_wrap{
  max-width: 100%;
}
.slider{
  margin: 0 auto;
}
.slider img{
  width: 100%;
}
.slick-arrow{
  z-index: 2;/*横幅いっぱいにすると左の矢印がスライダーの下になってしまうので「z-index:2」で上になるようにします。*/
}
.slick-prev{
  left: 25px;/*矢印がスライダーの外側になるように絶対配置されているので、それぞれ内側になるようにCSSで位置調整します。*/
}
.slick-next{
  right: 25px;/*矢印がスライダーの外側になるように絶対配置されているので、それぞれ内側になるようにCSSで位置調整します。*/
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,//自動再生を設定
    autoplaySpeed: 3000,//自動再生のスライド切り替えの時間を設定
    centerMode: true,
    centerPadding: '20%',
    dots: true,//インジケーターを表示
  });
});

このサンプルを見る

画面幅いっぱいのスライダー(応用編)

こちらのやり方はslickで自動で生成される「slick-list」というdivタグのCSSをいじって画面いっぱいにします。

デフォルトで「overflow:hidden;」になっているのを「overflow:visible;」にして、隠れていたスライドを表示しちゃいます！

最大のメリットは、真ん中のスライドの幅をCSSで自由に調整できることです。

スライダーをラップしている親要素に「overflow:hidden;」を設定しないと横にとんでもなく広がってしまいますのでご注意を…。

See the Pen 「slick」画面幅いっぱいのスライダー(応用編) by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
}
.slider_wrap{
  overflow: hidden;/*親要素「slider_wrap」に「overflow: hidden;」を設定します。これしないとメチャクチャ横に広がります。*/
  max-width: 100%;
}
.slider{
  margin: 0 auto;
  width: 400px;/*このやり方のメリットである、真ん中のスライドの幅をCSSで指定できちゃいます！*/
}
.slick-list{
  overflow:visible;/*「slick-list」に「overflow:visible;」を設定して隠れていたスライドを表示します。*/
}
.slider img{
  width: 100%;
}
.slick-arrow{
  z-index: 2;
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,//自動再生を設定
    autoplaySpeed: 3000,//自動再生のスライド切り替えの時間を設定
    centerMode: true,
    centerPadding: '20%',
    dots: true,//インジケーターを表示
  });
});

このサンプルを見る

ゆっくりスライドさせる

クライアント

うちの取引先企業のロゴをゆっくりスライドさせて

かすが

サービスサイトでよく見る「取引実績企業」のロゴたちがクルクル回ってるやつっすね！！承知しました！

See the Pen 「slick」ゆっくりスライドさせる by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
  <div class="slider">
    <div>LOGO1</div>
    <div>LOGO2</div>
    <div>LOGO3</div>
    <div>LOGO4</div>
    <div>LOGO5</div>
    <div>LOGO6</div>
    <div>LOGO7</div>
    <div>LOGO8</div>
    <div>LOGO9</div>
    <div>LOGO10</div>
  </div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px 0;
}
.slider .slick-slide{
  background: #fff;
  height: 100px;
  margin: 0 10px;
  padding: 10px;
}

jQuery

$(function() {
  $(".slider").slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 0,//スライドの間隔を空けないでずっと動かす
    cssEase: "linear",//動きのスピードを一定にする
    pauseOnFocus: false,//Focusしてもスライドを止めない
    pauseOnHover: false,//Hoverしてもスライドを止めない
    slidesToShow: 4,
    speed: 4000,//移動するスピード
    swipe: false,//スワイプをなしに
  });
});

このサンプルを見る

スライドの高さを揃える

デザイナー

スライド内の内容は違うけど高さを揃えたい

かすが

そうっすよね！承知しました！

スライドの高さを揃える前

See the Pen 「slick」スライドの高さを揃える(揃える前) by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

スライドの高さを揃えた後

See the Pen 「slick」スライドの高さを揃える(揃える前) by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div>大体、実際の制作では</div>
		<div>大体、実際の制作ではテキストのボリュームが</div>
		<div>大体、実際の制作ではテキストのボリュームが揃う訳ない訳で</div>
		<div>大体、実際の制作ではテキストのボリュームが揃う訳ない訳でそりゃ高さがずれるよね。</div>
		<div>大体、実際の制作ではテキストのボリュームが揃う訳ない訳でそりゃ高さがずれるよね。でも、デザイナーもクライアントも</div>
		<div>大体、実際の制作ではテキストのボリュームが揃う訳ない訳でそりゃ高さがずれるよね。でも、デザイナーもクライアントも当然のように「高さ揃えて」って</div>
		<div>大体、実際の制作ではテキストのボリュームが揃う訳ない訳でそりゃ高さがずれるよね。でも、デザイナーもクライアントも当然のように「高さ揃えて」って言うから揃えなきゃね！</div>
		<div>大体、実際の制作ではテキストのボリュームが揃う訳ない訳でそりゃ高さがずれるよね。でも、デザイナーもクライアントも当然のように「高さ揃えて」って言うから揃えなきゃね！よしやりますか！</div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px 0;
}
.slider_wrap{
  margin: auto;
  width: 600px;
}
.slick-track{
  display: flex;/*slick-trackの中のslick-slideの高さを「display: flex」で揃える*/
}
.slick-slide{
  background: #fff;
  height: auto!important;/*↑上の設定だけだとslick側のスタイルで打ち消されるので「height: auto!important;」で上書き*/
  margin: 0 10px;
  padding: 10px;
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,
    slidesToShow: 4,
  });
});

このサンプルを見る

真ん中のスライドだけ大きくする

デザイナー

真ん中のスライドだけ大きくして強調したい

かすが

ナイスアイディア！承知しました！

See the Pen 「slick」真ん中のスライドだけ大きくする by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 600px;
}
.slider{
  margin: 0 auto;
}
.slider img{
  width: 100%;
}
.slick-slide{
  padding: 40px;/*slick側で「overflow:hidden」が設定されているので大きくする分の余白を取っておく*/
}
.slick-current{
  transform: scale(1.4);/*真ん中のスライドに「slick-current」クラスが付くのでCSSで拡大する*/
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,
    centerMode: true,
    centerPadding: '20%',
    dots: true,
  });
});

このサンプルを見る

真ん中以外のスライドを半透明にする

デザイナー

真ん中以外のスライドを半透明にしたい

かすが

それいいすね！承知しました！

See the Pen 「slick」真ん中以外のスライドを半透明にする by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 600px;
}
.slider{
  margin: 0 auto;
}
.slider img{
  width: 100%;
}
.slick-slide{
  opacity: .3;/*スライド全部を半透明にしておく*/
  padding: 10px;
}
.slick-current{
  opacity: 1;/*「slick-current」(真ん中)の透明度を1にする*/
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,
    centerMode: true,
    centerPadding: '10%',
    dots: true,
  });
});

このサンプルを見る

左右の矢印とドットインジケーターをカスタマイズ

デザイナー

ドットインジケーターをオシャレにしたい

デザイナー

左右の矢印をオシャレにしたい

かすが

もちろんデザインに忠実に作ります！

slickの左右の矢印とドットインジケーターは、デフォルトだとbefore疑似要素にアイコンフォントを設定しています。

ちょっと癖があるやり方だと私的には思うので、一旦リセットしてからスタイルを適用します。

See the Pen 「slick」真ん中以外のスライドを半透明にする by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 300px;
}
.slider{
  margin: 0 auto;
}
.slider img{
  width: 100%;
}
.slick-slide{
  opacity: .3;
  padding: 10px;
}
.slick-current{
  opacity: 1;
}
/*まずは矢印とdotsの擬似要素をリセット↓*/
.slick-arrow::before,
.slick-dots li button::before {
  content: '';
}
/*.slick-arrowのスタイル*/
.slick-arrow{
  background: #fff;
  transition: .3s;
}
.slick-arrow::before{
  display: block;
  height: 10px;
  position: absolute;
  width: 10px;
}
.slick-arrow:hover{
  background: #fff;
  opacity: .8;
}
/*.slick-prev(左矢印)のスタイル*/
.slick-prev{
  transform: rotate(45deg);
}
.slick-prev::before{
  border-left: 2px solid #3398db;
  border-top: 2px solid #3398db;
  left: 5px;
  top: 4px;
  transform: rotate(-90deg);
}
/*.slick-next(右矢印)のスタイル*/
.slick-next{
  transform: rotate(-45deg);
}
.slick-next::before{
  border-right: 2px solid #3398db;
  border-top: 2px solid #3398db;
  right: 5px;
  top: 4px;
  transform: rotate(90deg);
}
/*.slick-dotsのスタイル*/
.slick-dots li button{
  background: #fff;
  height: 10px;
  opacity: .8;
  transition: .3s;
  transform: rotate(45deg);
  width: 10px;
}
.slick-dots li.slick-active button{
  background: #3398db;
  border: 3px solid #fff;
  opacity: 1;
  transform: rotate(45deg) scale(1.1);
}

jQuery

$(function() {
  $(".slider").slick({
    autoplay: true,
    centerMode: true,
    centerPadding: '10%',
    dots: true,
  });
});

このサンプルを見る

レスポンシブにする

クライアント

スマホで見た時も見やすくしたい

かすが

もちろんです！slickのオプション「responsive」でできちゃいます！

See the Pen 「slick」レスポンシブにする by 春日清伸 (@kntkfmgf-the-vuer) on CodePen.

こちらは埋め込みサンプルだとわかりにくいので、下の「このサンプルを見る」で別タブが開くので、そちらでブラウザの画面サイズ変えたりスマホで確認してもらった方が早いかと思います。

コードはこちら

HTML

<div class="slider_wrap">
	<div class="slider">
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/01.jpg" alt="01.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/02.jpg" alt="02.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/03.jpg" alt="03.jpg"></div>
		<div><img src="https://life-design-day.com/samples/p3847/sample01/assets/images/04.jpg" alt="04.jpg"></div>
	</div>
</div>

CSS

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #3398db;
  padding: 40px;
}
.slider_wrap{
  margin: 0 auto;
  width: 600px;
}
.slider{
  margin: 0 auto;
}
.slider img{
  width: 100%;
}
.slick-slide{
  padding: 10px;
}

jQuery

$(function(){
    $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    dots: true,
    slidesToShow: 3,
    responsive: [//オプションの「responsive」の「breakpoint」でレスポンシブで切り替えたい画面サイズ（px）を設定する
      {
        breakpoint: 768,//画面サイズが768pxに以下になったら表示するスライドを2つにする
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 480,//画面サイズが480pxに以下になったら表示するスライドを1つにする
        settings: {
          slidesToShow: 1,
        }
      },
    ],
  });
});

このサンプルを見る

slickの豊富な設定チートシート

slickにはめちゃくちゃ豊富に設定できることがあります。

かすが

豊富すぎてマジで覚えきれないです！

大きく分けて以下の3つです。

  • オプション
    →デザインや機能を設定（表示するスライド数、スライドする方向、サムネイルをつけるなど）
  • イベント
    →特定のアクションを取得して処理する（slickが読み込まれた後、スライドする前、スライドした後など）
  • メソッド
    →slickに特定のアクションを命令する（次のスライドへ移動、任意のスライドへ移動、自動スライドの停止など）

チートシートとして一覧で載せますので逆引きレシピ的な使い方で活用してくださいね。

かすが

果たしてこれはどんな時に使うんだ？的なマニアックな設定もあるのでマニア必見ですww。

オプション

 オプション設定のやり方は下記になります。

$(selector).slick({
    //設定したいオプションを設定
});
オプション一覧はこちら
スクロールできます
オプション説明初期値
accessibilityタブと矢印キーのナビゲーションを有効にするか。true
adaptiveHeightスライダーの高さを現在のスライドの高さに設定。false
autoplay自動再生を有効にするか。false
autoplaySpeed自動再生のスライド切り替えまでの時間をミリ秒で設定。3000
arrowsスライドの左右の矢印ボタンを表示するか。true
asNavForスライダを他のスライダのナビゲーションに設定。クラス名かID名null
appendArrowsスライドの左右の矢印ボタンを挿入する場所を変更する。セレクタ、htmlString、配列、要素、jQueryオブジェクト$(element)
appendDotsスライドのドットインジケーターを挿入する場所を変更する。セレクタ、htmlString、配列、要素、jQueryオブジェクト$(element)
prevArrow左の矢印ボタンのHTMLをカスタマイズ。<button type=”button” class=”slick-prev”>Previous</button>
nextArrow右の矢印ボタンのHTMLをカスタマイズ。<button type=”button” class=”slick-next”>Next</button>
centerModeスライドを中心に表示して部分的に前後のスライドが見えるように設定。 奇数番号のスライドに使用。false
centerPaddingセンターモード時のサイドパディング。見切れるスライドの幅。’px’または’％’。50px
cssEaseCSS3アニメーションイージングを設定。ease
customPagingdots:trueのとき、ドットをカスタマイズ。n/a
dotsドットインジケーターを表示するか。false
dotsClassドットインジケーターのクラス名を設定。slick-dots
draggableマウスでのドラッグを有効にするか。true
fadeスライダーの切り替えをスライドではなくフェイドインにするか。false
focusOnSelectクリックでのスライド切り替えを有効にするか。false
easingjQueryアニメーションイージングを追加。linear
edgeFrictioninfinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定。0.15
infiniteスライドのループを有効にするか。true
initialSlideスライドの開始番号。0
lazyLoad画像の遅延読み込みを設定。’ondemand’もしくは’progressive’。ondemand
mobileFirstレスポンシブの設定でモバイルの計算を優先させる。false
pauseOnFocus自動再生時にスライドにフォーカスした際、自動再生をストップさせるか。true
pauseOnHover自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるか。true
pauseOnDotsHover自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるか。false
respondToレスポンシブの基準を設定。’window’もしくは’slider’もしくは’min’）window
responsivebreakpointで設定したいブレイクポイントを設定。settingsで画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定none
rowsスライドの行数を設定。slidesPerRowを使用して、各行に含めるスライドの数を設定。1
slideスライドとして使用する要素を設定。”
slidesPerRowrowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定。1
slidesToShow表示するスライド数を設定。1
slidesToScrollスクロールするスライド数を設定。1
speedスライド/フェードアニメーションの速度を設定。300
swipeスワイプを有効にするか。true
swipeToSlideslidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かす。false
touchMoveタッチでスライドさせるか。true
touchThresholdスワイプでスライドさせる距離を設定。（1 / touchThreshold）*スライダの幅。5
useCSSCSS traditionを有効にするか。true
useTransformCSS transformを有効にするか。true
variableWidth可変幅のスライドにするか。（スライドの幅をバラバラにするか。）false
vertical垂直スライドモードにするか。false
verticalSwiping垂直のスワイプを有効にするか。false
rtlスライダの方向を右から左に変更するか。（right to left）false
waitForAnimateスライドアニメーション中にスライドを前後させる要求を無視するかtrue
zIndexスライドの重なり順。1000

イベント

 イベント取得のやり方は下記になります。

$(selector).on('eventname',function(){
    //行いたい処理
});
イベント一覧はこちら
スクロールできます
afterChangeスライド後に発生
beforeChangeスライド前に発生
breakpoint設定したブレークポイントの範囲内になったら発生
destroyスライダーを解除(unslick)した時に発生
edgeinfinite:falseのとき最初と最後のスライドをドラッグした時に発生
initスライダー初期化後に発生
reInitすべての再初期化後に発生
setPosition位置/サイズの変更後に発生
swipeスワイプ/ドラッグ後に発生
lazyLoaded画像遅延ロード後に発生
lazyLoadErrorイメージの読み込みが失敗した後に発生

メソッド

メソッドの一覧とコードサンプルです。

メソッド一覧はこちら
スクロールできます
slickCurrentSlide現在のスライドインデックスを取得
slickGoTo指定したスライドへ移動
slickNext次のスライドへ移動
slickPrev前のスライドへ移動
slickPauseスライドの自動再生を一時停止
slickPlayスライドの自動再生を再開
slickAddスライドを追加。インデックスの指定がない場合は末尾へ。インデックス(n)を指定した場合はn番目へ。addBeforeが設定されている場合は前に追加されます。
slickRemoveスライドを削除。インデックスの指定をしない場合は、removeBefore（true/false）で先頭（true）か末尾（末尾)を削除。インデックス(n)を指定した場合はn番目を削除。removeBefore（true）が設定されている場合は前のスライドを削除。
slickFilterjQueryのfilterを使用してスライドをフィルタリング
slickUnfilter適用されたフィルタリングを解除
slickGetOption指定したオプションの値を取得
slickSetOption指定したオプション値を設定（第4引数をtrueにするとリアルタイムに反映）
unslickスライダーを解除
getSlickスライダーを取得
コードサンプルはこちら

現在のスライドインデックスを取得(slickCurrentSlide)

$('.button').on('click',function(){
    console.log($('.slider').slick('slickCurrentSlide'));
});

指定したスライドへ移動(slickGoTo)

$('.button').on('click',function(){
    $('.slider').slick('slickGoTo',2);
});

次のスライドへ移動(slickNext)

$('.button').on('click',function(){
    $('.slider').slick('slickNext');
});

前のスライドへ移動(slickPrev)

$('.button').on('click',function(){
    $('.slider').slick('slickPrev');
});

スライドの自動再生を一時停止(slickPause)

$('.button').on('click',function(){
    $('.slider').slick('slickPause');
});

スライドの自動再生を再開(slickPlay)

$('.button').on('click',function(){
    $('.slider').slick('slickPlay');
});

先頭にスライドを追加(slickAdd)

$('.button').on('click',function(){
    $('.slider').slick('slickAdd', '<li>追加スライド</li>',0,'addBefore');
});

末尾にスライドを追加(slickAdd)

$('.button').on('click',function(){
    $('.slider').slick('slickAdd', '<li>追加スライド</li>');
});

2番目の後にスライドを追加(slickAdd)

$('.button').on('click',function(){
    $('.slider').slick('slickAdd', '<li>追加スライド</li>',2);
});

2番目の前にスライドを追加(slickAdd)

$('.button').on('click',function(){
    $('.slider').slick('slickAdd', '<li>追加スライド</li>',2,'addBefore');
});

先頭のスライドを削除(slickRemove)

$('.button').on('click',function(){
    $('.slider').slick('slickRemove',true);
});

末尾のスライドを削除(slickRemove)

$('.button').on('click',function(){
    $('.slider').slick('slickRemove',false);
});

2番目のスライドを削除(slickRemove)

$('.button').on('click',function(){
    $('.slider').slick('slickRemove',2);
});

2番目の前のスライドを削除(slickRemove)

$('.button').on('click',function(){
    $('.slider').slick('slickRemove',2,true);
});

奇数のスライドを表示(slickFilter)

$('.button').on('click',function(){
    $('.slider').slick('slickFilter',':odd');
});

特定のクラスのスライドだけ表示(slickFilter)

$('.button').on('click',function(){
    $('.slider').slick('slickFilter','.className');
});

適用されたフィルタリングを解除(slickUnfilter)

$('.button').on('click',function(){
    $('.slider').slick('slickUnfilter');
});

指定したオプションの値を取得(slickGetOption)

$('.button').on('click',function(){
    console.log($('.slider').slick('slickGetOption','autoplay'));
});

指定したオプション値を設定(slickSetOption)

$('.button').on('click',function(){
    $('.slider').slick('slickSetOption','autoplay',false,true);
});

スライダーを解除(unslick)

$('.button').on('click',function(){
    $('.slider').slick('unslick');
});

スライダーを取得(getSlick)

$('.button').on('click',function(){
    console.log($('.slider').slick('getSlick'));
});

メソッド一覧のサンプルを見る

slickが動かないときに確認すること

悩む人

slickを導入したのにスライダーが動かない

悩む人

見た目は表示されているけど、クリックしても何も起きない

slickは非常に優れたプラグインですが、正しくファイルを読み込めていなかったり、ちょっとした記述ミスがあるだけで動作しなくなることがあります。

特にjQueryとの連携や、読み込みの順序に関するトラブルは初心者に多く見られるポイントです。

この章では、slickがうまく動作しないときに確認すべき基本的なチェックポイントを3つ紹介します。

「どこでミスをしているのか分からない…」と手が止まってしまったときは、ここで紹介するチェックリストをひとつずつ確認することで、大抵の問題は解決できるはずです。

スライダーが動かなくて困っている方は、ぜひこの章を参考にして、slickのトラブルをスムーズに解消しましょう。

設置ファイルは正しいか

まず最初に確認すべきなのが、slickに必要なファイルが正しくHTMLに読み込まれているかです。最低限、以下の4つのファイルが必要になります。

  1. jQuery本体
  2. slickのCSS
  3. slickのテーマCSS
  4. slickのJavaScriptファイル

CDNを使った場合の例

<!--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://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
     
<!--js-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

ポイント

  • slickのCSSやJSのURLが変更・削除されていると、ファイルが読み込まれずエラーになります。
  • ローカルに保存している場合はファイルパスのスペルミスや相対パスの階層ミスがないか確認しましょう。

ファイルの設置の順番はあっているか

次に確認すべきなのが、JavaScriptファイルの読み込み順序です。slickはjQueryのプラグインとして動作するため、jQueryよりも前にslickを読み込んではいけません。

正しい読み込み順の例

<!-- NG：この順番では動きません -->
<script src="slick.min.js"></script>
<script src="jquery.min.js"></script>

<!-- OK：jQueryを先に読み込む -->
<script src="jquery.min.js"></script>
<script src="slick.min.js"></script>

ポイント：

  • JavaScriptファイルは依存関係を意識して順序を守る
  • <body>の最後に記述するのがトラブルを防ぐコツです

記述ミスはないか

最後にチェックすべきなのが、JavaScriptやHTMLの細かな記述ミスです。一見すると正しく書けているように見えても、1文字のスペルミスやセミコロンの忘れが、slickの動作を完全に止めてしまう原因になることがあります。

よくある記述ミスの例

  • クラス名のスペルミス
  • セミコロンの付け忘れやカンマの誤記
  • <script>タグの閉じ忘れ
  • jQueryの$が競合して動作していない（他のライブラリと併用している場合）

チェック方法

  • ブラウザの開発者ツールの「コンソール」タブを確認
  • コードエディタで構文エラーのハイライト表示を活用する
  • 同じ動作のサンプルを使って比較検証する

ポイント

  • 初心者は動くサンプルをコピペしてからカスタマイズするのが安全
  • slickが反応しないときは、console.log()でデバッグしてみるのも有効です

slickの使い方まとめ

ここまで、slickを使ってWebサイトにスライダーを簡単に実装する方法について、基本から応用まで幅広く解説してきました。最後に、この記事のポイントを振り返ってみましょう。

slickとは？

  • jQueryベースのスライダープラグインで、少ないコードで高機能なスライダーが作れる
  • オートプレイやドットインジケーター、レスポンシブ対応など、機能が豊富

導入方法

  • jQuery、slickのCSS/JSを正しい順番で読み込むだけ
  • .slider などのクラス名に対して .slick() を呼び出すだけで動作

基本的な使い方のサンプル集

  • 画像の複数表示、スライド数の制御、サムネイル連動、センターモードなど
  • 初心者でもすぐ試せるコピペ可能なコードを豊富に紹介

実践的なカスタマイズのサンプル集

  • ドットや矢印のデザイン変更
  • 高さ揃え、読み込み後表示、中央を大きく表示する表現など
  • 現場で実際によく求められるテクニックを厳選して掲載

トラブル時の対処法

  • slickが動かないときは、「ファイルの読み込み」「順番」「記述ミス」をチェック
  • consoleのエラーメッセージにも注目する

slick設定チートシート

  • オプションやメソッドを一覧化
  • 実装時に手元に置いておくと便利な即戦力リファレンス

slickは一見シンプルながら、応用次第でリッチで洗練されたスライダーを実装できる非常にパワフルなツールです。

この記事を通して、「ただ動くだけのスライダー」から一歩進んだ「見た目も動きも洗練されたスライダー」を作れるようになれれば何よりです！

「とりあえず動かしてみる」「少しずつカスタマイズしてみる」そんなステップで、ぜひslickを使いこなしてみてください。

かすが

最後まで読んでいただきありがとうございました！以下のおすすめ記事もチェックして見てくださいね！

まだブログを始めていない方は以下の記事をぜひチェック！

初心者でも今日からできる！ブログの始め方完全ガイド
あわせて読みたい
初心者でも今日からできる！ブログの始め方完全ガイド ブログは初期費用が少なく、自分のペースで取り組めるうえ、積み重ねた記事が将来的に資産として働いてくれる点が大きな魅力です。 とはいえ、インターネット上には情報…
ロリポップ!ライトプランはブログ初心者に絶対おすすめ！実際に使ってわかったメリット・デメリット
あわせて読みたい
ロリポップ!ライトプランはブログ初心者に絶対おすすめ！実際に使ってわかったメリット・デメリット まず結論として、これからWordPressを始めようとする初心者には月額料金、サーバースペックともにロリポップ!のライトプランがおすすめですです。 おすすめする主な理由…
【10分で完了】エックスサーバーのWordPressクイックスタートでブログを始めよう！
あわせて読みたい
【10分で完了】エックスサーバーのWordPressクイックスタートでブログを始めよう！ WordPressの始め方を初心者向けにどこよりも丁寧に解説する完全版超マニュアルです。当記事ではこれからWordPressを始める初心者にはロリポップ！のライトプラン（月額220円）を絶対おすすめしています。月額220円で同価格帯の他社プランと比較すると一強です。

ブログを始めたばかりの人は以下の記事をぜひチェック！

【初心者必見】WordPressを始める前にやるべき初期設定15選！
あわせて読みたい
【初心者必見】WordPressを始める前にやるべき初期設定15選！ WordPressを始めるなら絶対やっておきたい初期設定を重要度に分けて15個厳選しました。早く始めたい方もまずは当記事を参考に絶対やった方が良い設定はやっておきましょう！
プログラミング
jQuery slick Slider
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次