slickの使い方〜jQuery（動画解説あり）

新しく動画つきの記事を書きました。新しく動画つきの記事を書きました。
受講生の作品づくりにも人気のものですが、なぜか導入が上手くいかないという質問が多いので導入方法を動画にしました。

slick導入の基本

解説のページではなく、slick本家のサイトを参考にしましょう。

基本機能の導入

2017/11現在、本家のグローバルナビの「usage」をクリックすると基本機能を導入するためのコードがあります。

プラグインのコードはグローバルナビの「get it now」から入り「Download Now」ボタンでダウンロードできます。

使用するファイルとフォルダは次のものです。
slick.min.js
slick.css
slick-theme.css（無くても動きますが、あったほうがCSS記述が楽になる）

HTMLコード
クラス名のyour-classは好きなクラス名にします。

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

上の例はdivですがulとliでも大丈夫です。

ulを使用した例

<ul class="your-class">
  <li>your content</li>
  <li>your content</li>
  <li>your content</li>
</ul>

CSSのリンク

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

CSSはslickフォルダにslick.css、slick-theme.csを入れた状態です。
なお、パスが合っていればフォルダ名はなんでも構いません。

スクリプトのリンクはbody終了タグの直前に記述

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

srcの値が//から始まっていますが、サーバーにアップすれば正しく動作しますが、ローカルではリンク切れの状態になります。
そのため、ローカルで使う場合は「src=”http//code.jquery.com/jquery-1.11.0.min.js”」のようにローカルで使う場合のみ一時的にhttpを加えておきます。
//から始まる記述はssl対策です。
ssl対応のサイトの場合は、サーバーにアップ時に必ず「src=”//code.jquery.com/jquery-1.11.0.min.js”」の書き方に戻して置いてください。そうしないとサーバー上でリンク切れになる場合があります。

javascriptの記述
ここでセレクタに設定した「your-class」はHTMLで付けた名前と同じにします。
ネット上の解説ページではこの部分の説明が怪しいサイトがありますので注意しましょう。

$(function() {
	$('.your-class').slick(); 
});

さて、これで基本機能の導入は完了です。けれども、それらしい表示はされるものの期待と少し違う表示になるはずです。
例えば、カルーセル全体の表示がずれていたり、「次へ」「戻る」ボタンがなかったり、レスポンシブ対応となっているにも関わらずブラウザを縮めても画像サイズが変わらなかったりなど。また自動でカルーセルが動かないなど。。

ここまでの設定のデモ

この原因は自分でCSSを設定する必要があるからです。

CSSの設定

まずは左側だけ余白があって見栄えが悪い。
これはulとliでカルーセルの画像を囲んだときにできます。原因は簡単で、ulが初期状態で持つ左パディングが原因しています。
ul要素をcssでpadding:0にすれば解決します。つまり初期化は自分でやってねということでしょう。

ul{
  padding: 0;
}

次にレスポンシブ対応ですが、画像が縮小されないのはcssでimgに対してwidth:100%（max-width:100%）が入ってないからです。

img{
  max-width:100%;
  height:auto;
}

ところで、カルーセルが動かないのは自動の設定がしてないからです。
手動なら今までの設定でもとりあえず動かせます。PCではちょっと動かしづらいのですが、マウスで無理やり画像をドラッグすると動きます。
そしてこの状態でも実はnextボタンとprevボタンは表示されているのです。それは画面の左端と右端に存在しますが、ブラウザの外に有りしかも背景色と同じ白のため見えないだけです。見れるようにするにはカルーセルを囲む親要素にパディングを付けて背景色を付ければ良いです。

親要素のクラス名を「slider」にした例

.slider{
　　padding:0 50px;
　　background-color: #888;
}

ここまでのデモのサンプル

以上で基本機能は使えるようになります。
あとはオプションで機能を付け加えていきます。

オプションはjavascriptで次のように記述します。

よく使いそうなオプション例

$('.your-class').slick({
  dots: true,
  infinite: true,
  autoplay: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

よく使いそうなオプション例のデモ

その他optionの内容

lazyLoadオプションを使ったサンプルデモ

複数の画像を表示させるデモ