logo

INSPIRATION

INSPIRATION

WEBDESIGNDAY > INSPIRATION > Technique > jQuery・JS > 【jQuery】スライダープラグイン「slick」の使い方を詳しく解説

【jQuery】スライダープラグイン「slick」の使い方を詳しく解説

世の中にはたくさんのスライダープラグインがありますが、今回はレスポンシブ・タッチデバイスに対応、オプション設定も豊富なスライダープラグイン「slick」の使い方を詳しく解説していきます。
 

slickの機能概要

  • レスポンシブ対応
  • ブレークポイントごとに別々の設定が可能
  • スワイプ・マウスドラッグ可能
  • 無限ループ
  • スライドの追加、削除、フィルタリング、除外など

 

導入

ファイルのダウンロード

まずは公式サイトからファイルをダウンロードします。

kenwheeler.github.io
 
http://kenwheeler.github.io/slick/

または、以前紹介した「jsDelivr」というサイトにもCDNでホストされています。
（ちなみに2017年11月時点ではslickが1位です。）

jsDelivrの使い方はこちらの記事をチェックしてみてください。

webdesignday.jp
 
【jQuery】CDNならこのサイトが超便利！jsDelivrの使い方
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこ...

設置するファイル

  • ajax-loader.gif
  • fonts（フォルダ）
  • slick-theme.css
  • slick.css
  • slick.min.js

 

HTML

1
2
3
4
<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

CSSファイルの後にslickを設置します。jQuery本体を設置するのも忘れずに。
 

slickの基本な使い方

HTML

1
2
3
4
5
6
7
8
9
10
<ul class="slider">
    <li><a href="#"><img src="images/01.jpg" alt="image01"></a></li>
    <li><a href="#"><img src="images/02.jpg" alt="image02"></a></li>
    <li><a href="#"><img src="images/03.jpg" alt="image03"></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="image04"></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="image05"></a></li>
    <li><a href="#"><img src="images/06.jpg" alt="image06"></a></li>
    <li><a href="#"><img src="images/07.jpg" alt="image07"></a></li>
    <li><a href="#"><img src="images/08.jpg" alt="image08"></a></li>
</ul>

「slider」クラスにスライドを設定していきます。
 

jQuery

1
$('.slider').slick();

基本的なスライダーならたったこの1行です。
 

オプションを設定しないとあまりにあれなんで代表的なオプションを設定していきます。

1
2
3
4
5
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
});

1行目　「autoplay」で自動再生を設定
2行目　「autoplaySpeed」で自動再生のスライド切り替えの時間を設定
3行目　「dots」でインジケーターを表示
 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.slider{
    margin: 100px auto;
    width: 80%;
}
.slider img{
    height: auto;
    width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

12行目　左右の矢印ボタンはアイコンフォントになっていて、しかもフォントカラーが白になっています。サイトが白背景だと「ボタンがない!」と焦ることになります。なのでわかりやすく黒にしました。

サンプル1

 

カスタマイズ

基本はできましたので、ここから色々やってみましょう。
最後の方に載せますが、ものすごい数のオプションがあります。全てをやっていくと大変なことになるので、代表的な設定でカスタマイズしていきます。
 

複数の画像を表示

jQuery

1
2
3
4
5
6
7
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
    slidesToShow:2,
    slidesToScroll:2
});

5行目　「slidesToShow」で表示するスライドの数を設定します。
6行目　「 slidesToScroll 」で一度にスクロールするスライドの数も設定できます。

サンプル2

 

サムネイル付き

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="slider">
    <li><a href="#"><img src="images/01.jpg" alt="image01"></a></li>
    <li><a href="#"><img src="images/02.jpg" alt="image02"></a></li>
    <li><a href="#"><img src="images/03.jpg" alt="image03"></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="image04"></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="image05"></a></li>
    <li><a href="#"><img src="images/06.jpg" alt="image06"></a></li>
    <li><a href="#"><img src="images/07.jpg" alt="image07"></a></li>
    <li><a href="#"><img src="images/08.jpg" alt="image08"></a></li>
</ul>
<ul class="thumb">
    <li><a href="#"><img src="images/01.jpg" alt="image01"></a></li>
    <li><a href="#"><img src="images/02.jpg" alt="image02"></a></li>
    <li><a href="#"><img src="images/03.jpg" alt="image03"></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="image04"></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="image05"></a></li>
    <li><a href="#"><img src="images/06.jpg" alt="image06"></a></li>
    <li><a href="#"><img src="images/07.jpg" alt="image07"></a></li>
    <li><a href="#"><img src="images/08.jpg" alt="image08"></a></li>
</ul>

サムネイル用に「thumb」というリストを追加しました。
 

jQuery

1
2
3
4
5
6
7
8
9
10
$('.slider').slick({
    arrows:false,
    asNavFor:'.thumb',
});
$('.thumb').slick({
    asNavFor:'.slider',
    focusOnSelect: true,
    slidesToShow:4,
    slidesToScroll:1
});   

3,6行目　サムネイル付きスライダーのポイントは「asNavFor」で本体とサムネイルをリンクさせることです。

7行目　サムネイル画像をクリックして本体をスライドさせたい場合はサムネイルに「focusOnSelect：true」を設定します。

サンプル3

 

センターモード

jQuery

1
2
3
4
5
6
$('.slider').slick({
    centerMode: true,
    centerPadding: '100px',
    dots:true,
    focusOnSelect:true,
});

2行目　「centerMode」をtrueに設定するとセンターモードになります。
3行目　また「centerPadding」で両端の見切れるスライドの幅をピクセルで指定できます。
ちなみに、センターモード時は「slidesToshow」に1以上を設定しても1になります。

サンプル4

 

レスポンシブ

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
    slidesToShow:4,
    responsive:[
        {
            breakpoint: 1024,
            settings:{
                slidesToShow:3,
            }
        },
        {
            breakpoint: 768,
            settings:{
                slidesToShow:2,
            }
        },
        {
            breakpoint: 480,
            settings:{
                slidesToShow:1,
            }
        },
    ]
});

6行目　「responsive」で設定していきます。「responsive」は配列になっています。
8,14,20行目　「responsive」の配列の中に、「breakpoint」で設定したいブレイクポイントを設定していきます。
9,15,21行目　「settings」で画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定します。

「responsive」は他よりとっつきにくい印象がありますが、覚えてしまうとすごく便利なオプションです。

サンプル5

ブラウザの幅を狭くしていくと、設定したブレイクポイントでスライドの数が変わります。
 

画像遅延読み込み

ロード時に画像を全て読み込まないように設定できます。スライドするタイミングで読み込みますので、画像のファイルサイズが大きい場合に有効です。

HTML

1
2
3
4
5
6
<ul class="slider">
    <li><a href="#"><img data-lazy="images/01.jpg" alt="image01"></a></li>
    <li><a href="#"><img data-lazy="images/02.jpg" alt="image02"></a></li>
    <li><a href="#"><img data-lazy="images/03.jpg" alt="image03"></a></li>
    <li><a href="#"><img data-lazy="images/04.jpg" alt="image04"></a></li>
</ul>

こちらはオプションではなく、画像の「src」属性の変わりに「data-lazy」属性に画像のパスを設定します。
（画像のファイルサイズを大きめにしています。）
 

画像遅延読み込みなし

サンプル6-1

 

画像遅延読み込みあり

サンプル6-2

あまり違いはわからないと思いますが、読み込まれたファイルを見ると「画像遅延読み込みなし」は01〜04.jpgまで全て読み込むのに対して、「画像遅延読み込みあり」は01.jpgのみとなっています。
 

読み込み完了後に表示する

先ほど同様、画像のファイルサイズが大きい場合、最初に崩れた表示になってしまい、少し遅れて正常に表示される場合があります。カッコ悪いので読み込みが完了してから表示するようにします。

slickは読み込みが完了すると「slick-initialized」というクラスをつけてくれるのでこれを利用します。

CSS

1
2
3
4
5
6
7
8
9
.slider{
    margin: 100px auto;
    width: 80%;
    opacity: 0;
    transition: 3s;
}
.slick-initialized{
    opacity: 1
}

4行目　「slider」に「opacity: 0;」を設定して表示されないようにします。
5行目　わかりやすいように「 transition: 3s;」で3秒かけてアニメーションするようにしました。
8行目　読み込み完了後に付与される「slick-initialized」に「opacity: 1」を設定して表示します。
 

サンプル7

 

オプション

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

1
2
3
$(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
cssEase CSS3アニメーションイージングを設定。 ease
customPaging dots:trueのとき、ドットをカスタマイズ。 n/a
dots ドットインジケーターを表示するか。 false
dotsClass ドットインジケーターのクラス名を設定。 slick-dots
draggable マウスでのドラッグを有効にするか。 true
fade スライダーの切り替えをスライドではなくフェイドインにするか。 false
focusOnSelect クリックでのスライド切り替えを有効にするか。 false
easing jQueryアニメーションイージングを追加。 linear
edgeFriction infinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定。 0.15
infinite スライドのループを有効にするか。 true
initialSlide スライドの開始番号。 0
lazyLoad 画像の遅延読み込みを設定。’ondemand’もしくは’progressive’。 ondemand
mobileFirst レスポンシブの設定でモバイルの計算を優先させる。 false
pauseOnFocus 自動再生時にスライドにフォーカスした際、自動再生をストップさせるか。 true
pauseOnHover 自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるか。 true
pauseOnDotsHover 自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるか。 false
respondTo レスポンシブの基準を設定。’window’もしくは’slider’もしくは’min’） window
responsive breakpointで設定したいブレイクポイントを設定。settingsで画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定 none
rows スライドの行数を設定。slidesPerRowを使用して、各行に含めるスライドの数を設定。 1
slide スライドとして使用する要素を設定。 ”
slidesPerRow rowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定。 1
slidesToShow 表示するスライド数を設定。 1
slidesToScroll スクロールするスライド数を設定。 1
speed スライド/フェードアニメーションの速度を設定。 300
swipe スワイプを有効にするか。 true
swipeToSlide slidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かす。 false
touchMove タッチでスライドさせるか。 true
touchThreshold スワイプでスライドさせる距離を設定。（1 / touchThreshold）*スライダの幅。 5
useCSS CSS traditionを有効にするか。 true
useTransform CSS transformを有効にするか。 true
variableWidth 可変幅のスライドにするか。（スライドの幅をバラバラにするか。） false
vertical 垂直スライドモードにするか。 false
verticalSwiping 垂直のスワイプを有効にするか。 false
rtl スライダの方向を右から左に変更するか。（right to left） false
waitForAnimate スライドアニメーション中にスライドを前後させる要求を無視するか true
zIndex スライドの重なり順。 1000

 

イベント

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

1
2
3
$(selector).on('eventname',function(){
    //行いたい処理
});

 

afterChange スライド後に発生
beforeChange スライド前に発生
breakpoint 設定したブレークポイントの範囲内になったら発生
destroy スライダーを解除(unslick)した時に発生
edge infinite:falseのとき最初と最後のスライドをドラッグした時に発生
init 最初の初期化後に発生
reInit すべての再初期化後に発生
setPosition 位置/サイズの変更後に発生
swipe スワイプ/ドラッグ後に発生
lazyLoaded 画像遅延ロード後に発生
lazyLoadError イメージの読み込みが失敗した後に発生

「init」、「afterChange」、「beforeChange」を使ってサンプル作成しました。スライドの中にテキストを入れてアニメーションさせるよく見るやつです。

サンプル8

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="slider">
    <li class="slide">
        <a class="slide__link" href="#">
            <img src="images/01.jpg" alt="image01">
            <span class="slide__content-wrap">
                <span class="slide__content">
                    <h2 class="slide__title">slider1 text here!</h2>
                    <p class="slide__text">
                    Lorem ipsum dolor sit amet, 以下省略       
                    </p>
                </span>
            </span>
        </a>
    </li>
    <!--以下省略-->
</ul>

6行目　「slide__content」に「on」クラスをつけたり外したりしてアニメーションさせます。
 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.slider{
    margin: 100px auto;
    width: 80%;
}
.slide{
    position: relative;
}
.slide__link{
    color: #fff;
    text-align: center;
}
.slide img{
    height: auto;
    width: 100%;
}
.slide__content-wrap{
    left: 50%;
    position: absolute;
    top: 50%;
}
.slide__content{
    display: block;
    opacity: 0;
    transform: translate(-50%,20%);
    transition: 0s;
}
.slide__content.on{
    opacity: 1;
    transform: translate(-50%,-50%);
    transition: .5s;
}
.slide__title{
    font-size: 48px;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before{
    color: #000;
}

21行目　「.slide__content」を「opacity: 0;」で見えなくしておきます。また、transform: translate(-50%,20%);で下に移動しておきます。
27行目　jQueryで「.slide__content」に「on」クラスを付与し、「opacity」と「transform」をアニメーションさせます。
 

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('.slider').on('init',function(){
    $('.slide__content').addClass('on');
});    
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
});
$('.slider').on('beforeChange',function(){
    $('.slide__content').removeClass('on');
});
$('.slider').on('afterChange',function(){
    $('.slide__content').addClass('on');
});

9行目　「beforeChange」でスライドが移動する前に「on」クラスを削除。
12行目　「afterChange」でスライドが移動が完了したら「on」クラスを付与。

1行目　これだけだとロード時に最初のスライドのテキストがアニメーションしません。ですので「init」でスライダーが初期化されたタイミングでも「on」クラスを付与します。

「init」のイベント取得で注意しないとならないのは$(‘.slider’).slick()」の前で書かないと取得できないという点です。
 

サンプル8

 

メソッド

メソッドを使用したサンプルです。

サンプル9

 

slickCurrentSlide

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

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

 

slickGoTo

指定したスライドへ移動

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

 

slickNext

次のスライドへ移動

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

 

slickPrev

前のスライドへ移動

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

 

slickPause

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

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

 

slickPlay

スライドの自動再生を再開

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

 

slickAdd

スライドを追加。インデックスの指定がない場合は末尾へ。インデックス(n)を指定した場合はn番目へ。addBeforeが設定されている場合は前に追加されます。

先頭にスライドを追加

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

 

末尾にスライドを追加

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

 

2番目の後にスライドを追加（0から数えて2番目の後）

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

 

2番目の前にスライドを追加（0から数えて2番目の前）

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

 

slickRemove

スライドを削除。インデックスの指定をしない場合は、removeBefore（true/false）で先頭（true）か末尾（末尾)を削除。インデックス(n)を指定した場合はn番目を削除。removeBefore（true）が設定されている場合は前のスライドを削除。

先頭のスライドを削除

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

 

末尾のスライドを削除

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

 

2番目のスライドを削除（0から数えて2番目）

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

 

2番目の前のスライドを削除（0から数えて2番目の前）

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

 

slickFilter

jQueryのfilterを使用してスライドをフィルタリング

奇数のスライドを表示

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

 

.filterクラスのスライドだけ表示

1
2
3
$('.button').on('click',function(){
    $('.slider').slick('slickFilter','.filter');
});

 

slickUnfilter

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

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

 

slickGetOption

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

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

 

slickSetOption

指定したオプション値を設定（第4引数をtrueにするとリアルタイムに反映）

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

 

unslick

スライダーを解除

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

 

getSlick

スライダーを取得

1
2
3
$('.button').on('click',function(){
    console.log($('.slider').slick('getSlick'));
});
サンプル9

 

それでは良いWEBデザイン日和を！Have a nice WEBDESIGNDAY!
 

RELATED POST

スプリットレイアウトの作り方を解説!レスポンシブにも対応！
NEXT INSPIRATION
【CSS】画像やテキストを縦横中央に配置する方法4つ
PREVIOUS INSPIRATION
↑
:)