トップ > Programing > スライダープラグイン「slick」の使い方を詳しく解説

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

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

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

slickの機能概要

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

導入

ファイルのダウンロード

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

slick

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

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

設置するファイル

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

HTML

<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

<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

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

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

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

$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
});

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

CSS

.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

$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
    slidesToShow:2,
    slidesToScroll:2
});

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

サンプル2

サムネイル付き

HTML

<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

$('.slider').slick({
    arrows:false,
    asNavFor:'.thumb',
});
$('.thumb').slick({
    asNavFor:'.slider',
    focusOnSelect: true,
    slidesToShow:4,
    slidesToScroll:1
});

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

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

サンプル3

センターモード

jQuery

$('.slider').slick({
    centerMode: true,
    centerPadding: '100px',
    dots:true,
    focusOnSelect:true,
});

2行目　「centerMode」をtrueに設定するとセンターモードになります。
3行目　また「centerPadding」で両端の見切れるスライドの幅をピクセルで指定できます。

サンプル4

レスポンシブ

jQuery

$('.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

<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

.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

オプション

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

$(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イメージの読み込みが失敗した後に発生

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

サンプル8

HTML

<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

.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

$('.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」クラスを付与します。

サンプル8

メソッド

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

サンプル9

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

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

先頭にスライドを追加

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

末尾にスライドを追加

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

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

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

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

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

slickRemove

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

先頭のスライドを削除

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

末尾のスライドを削除

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

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

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

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

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

slickFilter

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

奇数のスライドを表示

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

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

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

slickUnfilter

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

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

slickGetOption

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

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

slickSetOption

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

$('.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'));
});

サンプル9

Category&Tag

icon_sec_titleRELATED ARTICLES

タグ

icon_sec_titleCATEGORY

WEBデザイン
WEBデザイン
 プログラミング
プログラミング
 WEBツール
WEBツール
 WEBマーケ・SEO
WEBマーケ・SEO