「slick」の使い方とオプションによるカスタマイズ

2018年3月27日

かつて世界一使いやすいと言われた、有名な画像スライダープラグイン「bxSlider」を超えるスライダーとして、まことしやかに「最強スライダー説」が囁かれている、かゆい所に手が届く万能スライダー「slick（スリック）」

その使い方とオプションによるカスタマイズ方法に加え、レスポンシブの設定方法や、サムネイルとの連携、さらにslickのバグの対処法をまとめた。

流行りの脱jQuery仕様でオプションがめちゃ多い「Swiper.js」もオススメ！

また、slickを超えて人気急上昇、フロントエンジニアなら知らない人はいない、オプションがメチャクチャ多くて流行りの脱jQuery仕様なスライダー「swiper」の使い方を知りたい方はこちら↓

▶ Swiper V8の使い方「レスポンシブ等の具体例」とオプション解説

できるだけ早くWEBデザイン・プログラミングスキルを習得し、すぐに仕事を始めたい方は、コスパの良いスクールの受講がオススメなので、実際私がスクールを受講した体験を踏まえたおすすめのスクールをご参考に↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実…

ちなみにクリエイターの方に朗報！「Adobe CCコンプリートプラン1年版」が約45%OFFでちゃんとした正規方法で購入できる！実際私も３年連続購入しているのでこちらの体験記事を読んでおいて損はない↓

▶ Adobe CC [45%OFF]学生価格で｢社会人｣が安く買う方法！(コンプリートプラン)

AdobeCreativeCloudのコンプリートプランを安く買う方法を知りたい！AdobeCC（Creativ…

slickは使い方が簡単でカルーセルのオプションが最強！

slickはとても汎用性が高く、特にカルーセルのオプションが充実しており、bxsliderに比べてレスポンシブの設定が容易で、動作が安定しているのが特徴だ！

JavaScriptに特化したサイトJavascripting.comでも、bxsliderを抜いてslickがNo1の評価を得ている模様。

ここまで機能が揃っていて動作も安定しているのは、他のプラグインと比べて頭一つ抜けているのではないでだろうか。今のところこれ一つでほぼ問題ないように思われる。

slickのダウンロード

公式サイトのナビゲーションの「get it now」をクリックすると、ページの下部に飛ぶので、そこにある「Download Now」をクリックすると一式ダウンロードする事ができる。

slickの使い方

ダウンロードファイルの中で最低限必要なファイルは以下の２点のみ。

「slick.js」「slick.css」

slickの読み込み

まずはダウンロードしたslick.css を読み込んでおく。

<link rel="stylesheet" href="../css/slick.css" />

次にbodyの閉じタグの直前で jQuery と slick.js（もしくはslick.min.js）の順に読み込ませる。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../js/slick.js"></script>

最低限の記述

HTML

<div class="your-class">
 <div>your content 1</div>
 <div>your content 2</div>
 <div>your content 3</div>
</div>

JavaScript

<script>　
$(document).ready(function(){
 　$('.your-class').slick({
 　setting-name: setting-value
 　});
 });
</script>

「setting-name」の箇所にはオプション名、「setting-value」にはオプションの値を入れる事で好みの内容にカスタマイズする事ができる。

オプションの使い方とカスタマイズ方法

オプション名	オプション説明・デフォルト値	オプション記述例・備考
accessibility	タブと矢印キーのナビゲーションの有効化 [default:true]
adaptiveHeight	スライドの高さの自動調整の有効化 [default:false]
autoplay	自動再生の有効化 [default:false]
autoplaySpeed	自動再生のスピード（ミリ秒単位） default:3000
arrows	前/次の矢印の生成の有効化 [default:true]
asNavFor	スライダを他のスライダのナビゲーションに設定する（クラス名またはID名） [default:null]
appendArrows	矢印ナビの生成場所を変更 [default:$(element)]
appendDots	ドットナビの生成場所を変更 [default:$(element)]
prevArrow	「前へ」ナビのHTMLをカスタマイズ [default:<button type="button" class="slick-prev">Previous</button>]	prevArrow:'<div class="prev">PREV</div>' （arrowsオプションがtrueの場合のみ）
nextArrow	「次へ」ナビのHTMLをカスタマイズ [default:<button type="button" class="slick-next">Next</button>]	nextArrow:'<div class="next">NEXT</div>' （arrowsオプションがtrueの場合のみ）
centerMode	slidesToShowが奇数の時、現在のスライドを中央に表示するか [default:false]	スライド数が奇数の場合に、カレントスライドを中央に配置するとともに、表示外のスライドが少しだけ見切れるようになる
centerPadding	centerMode:trueの時、左右のスライドを見せる幅(px or %) [default:50px]	centerPadding:'10%' （シングルクォーテーションで囲う）
cssEase	CSS3 Animation イージングの指定 [default:ease]	cssEase: 'ease-in' （ease-in,ease-in-out,linearなど）
dots	ドットナビを表示する [default:false]
customPaging	dots:trueのとき、ドットをサムネイルなどにカスタマイズする [default:なし]	functionをつかってカスタマイズ可能
dotsClass	ドットナビのクラス名の変更 [default:'slick-dots']	dotsClass: 'my-dots',
draggable	マウスドラッグでスライド切替えの有効化 [default:true]
fade	スライド切替えをフェードにする [default:false]	slidesToShowオプションを2以上にする場合は、fadeをfalseにしないと動かない
focusOnSelect	クリックした要素にスライドするを有効化 [default:false]
easing	jQueryのイージング [default:linear]
infinite	スライドの無限ループの有効化 [default:true]
edgeFriction	infinite:false時のカルーセルの両端をスワイプしたときのバウンドする値 [default:0.15]
initialSlide	最初のスライドを指定 [default:0]	0から始まる数字で指定
lazyLoad	画像の遅延表示タイプ [default:ondemand]	（ondemand/progressive)
mobileFirst	モバイルファーストにするか [default:false]
pauseOnFocus	autoplay:true時にフォーカスで一時停止させるか [default:true]
pauseOnHover	autoplay:true時にマウスホバーで一時停止させるか [default:true]
pauseOnDotsHover	autoplay:true時にドットナビをマウスホバーで一時停止させるか [default:true]
respondTo	レスポンシブの判断基準 [default:window]	（window/slider/min）
responsive	レスポンシブのブレイクポイントを設定してオプションを切り替える（下記にて例を記載） [default:none]	指定された画面幅のみで有効となるオプションを設定カンマ区切りで複数指定可能
rows	行数の指定 [default:1]	2以上に設定すると、グリッドモードが初期化されます。slidesPerRowを使用して、各行に含めるスライドの数を設定します。
slide	スライドとして使用する要素のタグ名 [default:'']
slidesPerRow	rowsの値が2以上のとき、1行あたりに表示させるスライド数 [default:]	行オプションを使用してグリッドモードを初期化すると、各グリッド行にいくつのスライドがあるかが設定されます。
slidesToShow	表示するスライド数 [default:1]	2以上にする場合は、fadeオプションをfalseにする必要がある
slidesToScroll	１スクロールで動くスライド数 [default:1]
speed	スライド/フェードアニメーションの速度 [default:300]
swipe	スワイプの有効化 [default:true]
swipeToSlide	slidesToScrollに関係なく、ユーザーがスライドに直接ドラッグまたはスワイプすることを許可する [default:false]
touchMove	タッチでスライドさせる [default:true]
touchThreshold	スライダーの横幅分マウスドラッグするとスライドされる [default:5]
useCSS	CSSのtransitionを有効化 [default:true]
useTransform	CSSのtransformを有効化 [default:true]
variableWidth	可変幅スライド [default:false]
vertical	縦方向にスライドを有効化 [default:false]
verticalSwiping	縦方向のスワイプを有効化 [default:false]
rtl	スライド順を逆にする [default:false]
waitForAnimate	スライドアニメーション中に別のスライドへのスライドを無効にする [default:true]	アニメーション中のサムネイル等をクリックした時の動作を無効にする
zIndex	z-indexの値 [default:1000]

オプションの記述例

上記のオプションを使う方法の例として、良く使うものを入れた例を記載。例では「オートプレイを有効」「自動高さ調整を有効」「次と前へのナビゲーションを独自のHTMLコードに変更」にしている。

次と前へのナビゲーションの位置や見ためは適宜CSSで調整しよう。

<script>　
$(document).ready(function(){
 　$('.your-class').slick({
 　　autoplay: true,
 　　adaptiveHeight: true,
 　　arrows: true,
 　　prevArrow:'<div class="prev">PREV</div>',
 　　nextArrow:'<div class="next">NEXT</div>'
 　});
 });
</script>

１画面に複数枚表示するカルーセルタイプにする方法

画像のスライドショーには、１枚だけ見えるタイプと一度に複数枚見えているタイプがあると思うが、一度に複数枚見えているタイプを実現する方法はとても簡単で「slidesToShow」のオプションで任意数字を入れるだけだ。
※ただし、なぜかfadeオプションをfalseにしないと複数表示にならないので注意してほしい。

HTML

 <div class="slick">
  <div><img src="./img/img01.jpg" alt=""></div>
  <div><img src="./img/img02.jpg" alt=""></div>
  <div><img src="./img/img03.jpg" alt=""></div>
  <div><img src="./img/img04.jpg" alt=""></div>
  <div><img src="./img/img05.jpg" alt=""></div>
 </div>

JavaScript

 　$('.slick').slick({
 　　arrows: true,
 　　slidesToShow:3,
 　　prevArrow:'<div class="prev">PREV</div>',
 　　nextArrow:'<div class="next">NEXT</div>'
 　});

現在（カレント）のスライドを真ん中にする

上記の複数枚のスライドをさらにカスタマイズして、現在のスライド（カレントスライド）を中央に配置する方法は、オプションで「centerMode:true」にするだけ。

 　$('.slick').slick({
 　　arrows: true,
  slidesToShow:3,
  centerMode:true,
 　　prevArrow:'<div class="prev">PREV</div>',
 　　nextArrow:'<div class="next">NEXT</div>'
 　});

「centerMode:true」にすることで、現在アクティブな画像が（例では「01」）中央に配置され、02の右側と05の左側に見える、次の画像が少し見切れた状態になる。

この左右に「見切れている画像の幅」を調整するには、オプションの「centerPadding」で幅をpx（ピクセル）か%（パーセント）の数値で指定するするだけで変更可能。もちろん0にする事もできる。

レスポンシブの設定

slickはもちろんレスポンシブにも対応しており、設定も簡単！

下記コードのように「breakpoint」を数値で設定する事で、その数値以下のサイズに対するオプションの上書き設定が可能だ。

下記例では、PCサイズ（768px以上）は「slidesToShow:3」スマホサイズ(767以下)は「slidesToShow:2」に（上書きされる形に）なる。

$('.slick').slick({
 　　arrows: true,
  slidesToShow:3, //768px以上のサイズに適用
 　　prevArrow:'<div class="prev">PREV</div>',
 　　nextArrow:'<div class="next">NEXT</div>'
  responsive: [
   {
    breakpoint: 768, //767px以下のサイズに適用
    settings: {
      slidesToShow:2
    }
   }
 ]
 　});

ちなみにこの768pxという「幅の基準」は、デフォルトではウインドウサイズを基準としているのだが、オプションの設定で「respondTo:'slider'」とする事でスライダーの幅を基準にする事もできる。

レスポンシブのブレイクポイントを複数指定する

ブレイクポイントが１つだけでなく、以下のように記述すれば「ブレイクポイントを複数指定」する事もできる。

$('.slick').slick({
 　　arrows: true,
  slidesToShow:4, //1024px以上のサイズに適用
 　　prevArrow:'<div class="prev">PREV</div>',
 　　nextArrow:'<div class="next">NEXT</div>'
 responsive: [
   {
     breakpoint: 1024, // 768~1023px以下のサイズに適用
        settings: {
           slidesToShow:3
        }
    }, {
      breakpoint: 768, // 480〜767px以下のサイズに適用
        settings: {
           slidesToShow: 2
         }
     },{
 breakpoint: 480, // 〜479px以下のサイズに適用
       settings: {
          slidesToShow: 1
       }
    }
 ]
 });

サムネイル付きスライダーにする方法

メインのビジュアルとそのサムネイルが並ぶタイプのスライダーを作るのも簡単。

まずはこれまでの例で使っていたスライダーに加えて、以下のようにサムネイル用のHTML記述を追加。

この時メインのスライドとは違うクラスを付けると、初心者にも理解しやすく設計できる。

HTML

 <div class="slick">
 <div><img src="./img/img01.jpg" alt=""></div>
 <div><img src="./img/img02.jpg" alt=""></div>
 <div><img src="./img/img03.jpg" alt=""></div>
 <div><img src="./img/img04.jpg" alt=""></div>
 <div><img src="./img/img05.jpg" alt=""></div>
 </div>
 <div class="thumbnail">
 <div><img src="./img/img01.jpg" alt=""></div>
 <div><img src="./img/img02.jpg" alt=""></div>
 <div><img src="./img/img03.jpg" alt=""></div>
 <div><img src="./img/img04.jpg" alt=""></div>
 <div><img src="./img/img05.jpg" alt=""></div>
 </div>

次にJavaScriptの記述は、次のようにそれぞれ「別のスライダとして記述」して、オプションの「asNavFor」にお互いのクラスを指定して、相互に連携するような形で設定する。

 　$('.slick').slick({
   asNavFor:'.thumbnail',
   arrows: true,
   slidesToShow:1,
   prevArrow:'<div class="arrow prev">PREV</div>',
   nextArrow:'<div class="arrow next">NEXT</div>',
 });
 $('.thumbnail').slick({
   asNavFor:'.slick',
   focusOnSelect: true,
   arrows: false,
   slidesToShow:4,
 });

つまり、メインのスライドである「.slick」の設定では、「asNavFor:'.thumbnail'」とサムネイル側のクラスを指定。

逆にサムネイル側のスライドの設定では「asNavFor:'.slick'」という形で、メインのスライダを指定するという形だ。

また、サムネイル側のスライダに、オプション「focusOnSelect: true」を指定する事で、サムネイルをクリックするだけで、メインスライダが動くようになる。

現在選ばれているサムネイルをカレント表示する方法

上記の連携で、現在メインのスライダーが表示している画像のサムネイルをカレント表示したい場合は、サムネイル側の現在アクティブなスライドに「slick-current」というクラスが付与される。

そのクラス名を使ってCSSやJavaScriptで、見ためを変化させる事で実現できる。

例として簡単にCSSでカレント表示をする場合は、CSSを以下のようにする事で対応できます。

.thumbnail .slick-current{
 opacity: 0.3;
}

サムネイルと連携する場合のslickのバグと対処法

ただ上記のサムネイルとの連携で１点だけバグを確認した。

それは、サムネイルの数がslidesToShowで指定した数より多い場合は問題ないのだが、それと同じもしくはそれ以下の場合に、メインスライダ側の「画像をフリック」したり、メインスライダ側の「次へ前へのナビ」をクリックすると、サムネイルの挙動がおかしくなるというバグが発生するのだ。

つまり例えば、サムネイル側の設定が「slidesToShow:5」でサムネイルが５つ表示されている状態で、実際にHTMLで記述しているサムネイルの数が5つ、もしくはそれ以下の場合にこの現象が発生するという事だ。

このバグの対処法として、最も簡単な方法は、上記の連携のサンプルで説明すると、メインのスライダ側の「asNavFor:'.thumbnail'」の設定を入れないという方法。

つまりメインのスライダを動かしても、サムネイルと連携していないので、スライダは動かないという事。

ただし、サムネイル側のカレント表示を実現したい場合は、この方法では対応できない。

この場合は、公式に用意されたイベントやメソッドを使って対応する方法があるので、こちらは後日記事をアップデートしたいと思います。

slickのイベント

ある程度使えるようになった人は、slickが公式で用意している「イベント」を使ってカスタマイズしてみよう。

「イベントってなに？」という人に補足しよう。

例えば以下の「afterChange」イベントの例だと、「スライダーが画像を切替えた後（『afterChange』イベントの後）」に、「何かの関数を走らせる」という使い方をする。

つまりイベントとは言い換えると「きっかけであり、タイミング（トリガー）」なのだ。

具体的にイベントの使い方の記述例は次のように書く。

$('.your-element').on('afterChange', function(event, slick, currentSlide, nextSlide){
 console.log("スライドしました"); //任意の関数や動き
});

「.your-element」の部分は文字通りスライダーにつけているクラスを指定。あとは、上記の記述にならって、イベント名をつけてからfunctionの引数に一覧にある引数を指定して、function内で任意の関数を記述する。

イベント名	イベントの説明	引数
afterChange	スライドが切り替わった後	slick, currentSlide
beforeChange	スライドが切り替わる前	slick, currentSlide, nextSlide
breakpoint	ブレイクポイント時	event, slick, breakpoint
destroy	スライダーを解除(unslick)した時	event, slick
edge	infinite:falseの際に両端のスライドをドラッグした時	slick, direction
init	スライダーが初期化された時	slick
reInit	スライダーが再初期化された時	slick
setPosition	位置/サイズの変更後	slick
swipe	スワイプ/ドラッグ後	slick, direction
lazyLoaded	画像がlazyLoadされる時	event, slick, image, imageSource
lazyLoadError	画像がlazyLoadされなかった時	event, slick, image, imageSource

「slick」のまとめと、自動コーディングの時代について

今のところ個人的に世界一使いやすい、画像スライダーjQueryライブラリの「Slick」を使う事で、画像スライダー作成作業がかなり楽になるのではないだろうか。

私自身も、楽になって空いた時間を使って、さらなるスキルアップの勉強に時間を使おうと思っている。

このままのスキルでは生き残れない時代に

WEBデザイナーやHTMLコーダーは、どんどん新たな後輩たちが業界に入ってき、STUDIOのような自動コーディングツールが今後どんどん出てくることで、正直、このままのスキルでは生き残れない時代になってきている。

今のうちに後輩たちに負けないよう、WEBデザイナーのスキルを圧倒的に上げるが、もしくはWEBデザイナーと親和性のある「プログラミングのスキル」などを身につけておかないとやばいことになりそう。

新たなスキルを付けるには？

新たなスキルの勉強は「収入アップ」にもつながり、皆より一足先に勉強を初めてアドバンテージを取ることで、近い将来仕事に困らない人材になれるだろうし。

筆者は、WEBデザイナーであり、過去に何度か独学でプログラミングの勉強をしたが、独学での限界を感じ自分への投資の意味も含め、時間の都合がつきやすい「オンラインのプログラミング講座」を学んだ。

独学だと「エラーの原因追求に何時間もかかる」が、オンラインスクールだと、チャットの質問で一瞬で解決できたり、書籍には載っていないコアな部分の質問ができたり。

独学で長時間をかけて学んでいた過去の時間が、すごくもったいなく感じたので、時間短縮でプログラミングスキルをつけたいのであれば、オンラインスクールがおすすめ。

無料でプログラミングを学べる！【東京近郊２０代限定】

もし、東京周辺にお住まいで20歳代なら、無料のプログラミングスクールもある。「２０代で東京周辺のにお住まいの方限定」ですが、興味のある方はこちらの記事「無料のプログラミングスクール？GEEK JOBは就職支援付きで凄いらしい！」も合わせて読んでみてください。無料なのは、スクールが企業に人材紹介料をもらっているなので、安心して受講できます。

また「いろんなスクールを比較してみたい」人は、私が受講前にいろいろ調べまくって、厳選した４社を紹介した記事も書いたので、こちらもあわせてどうぞ。実際スクール数えきれないほど存在するので、いちいち全部しらべていたら時間がかかって仕方ない（経験したのでわかります）。その時間を勉強に回したほうが、経済的ですｗ