解 説

レスポンシブ対応のカルーセルを導入したい場合にjQueryのプラグインでslickがあります。
受講生の作品づくりにも人気のものですが、なぜか導入が上手くいかないという質問が多いので導入方法を書いておきます。

上手くいかない原因

  1. ネット上で上位表示される記事で間違った設定の説明があるので混乱してしまう。
  2. cssはslickに用意されたものだけでは上手くいかない。画像のフルードイメージ化などは自分で行う必要がある。

以上の2点を押さえておけば簡単に導入できるものです。

slick導入の基本

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

基本機能の導入

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

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

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

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

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

ulを使用した例

CSSのリンク

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

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

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で付けた名前と同じにします。
ネット上の解説ページではこの部分の説明が怪しいサイトがありますので注意しましょう。

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

ここまでの設定のデモ

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

CSSの設定

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

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

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

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

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

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

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

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

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

その他optionの内容

 

option一覧
accessibility:true  タブと矢印キーのナビゲーションを有効にする
autoplay:false 自動再生。trueで自動再生される。
autoplaySpeed:5000 自動再生で切り替えをする時間(待ち時間)。 この設定だけでは自動再生されません。autoplay:trueを設定しておくこと
speed:600 自動再生や左右の矢印でスライドするスピード
pauseOnHover:true 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
pauseOnDotsHover:true  自動再生時にドットにマウスオンで一時停止するかどうか
cssEase:’ease’  切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
dots:false  画像下のドット(ページング)を表示
dotsClass:’dot-class’ ページング部分のulに好きなclass名をつける
draggable:true  ドラッグでスライドできるかどうか
fade:false 切り替え時のフェードイン設定。trueでフェードしながら変わる
arrows:true 左右のボタンを表示するかどうか。trueで表示、falseで非表示
infinite:true  自動再生ではtrueが最後の画像が表示し終わったら、最初の画像に戻って繰り返す。falseは最後の画像を表示したら逆に戻って表示する。手動の場合は最後の画像が表示されたらボタンが使えなくなる。
initialSlide:0  何番目の画像を表示するか数字を指定。最初の数字は0から始まるので注意。
lazyLoad:‘ondemand’ 画像を遅延読み込みする。‘ondemand’または’progressive’で指定する。ondemandは画像が表示されるタイミングで load 処理されるもので、progressiveはコードが読み込まれると同時に画像の読み込みが行われるものです。lazyloadを使用する場合、2番目の画像から「src属性」を「data-lazy」とする必要があります。
slidesToShow:3  スライドのエリアに画像がいくつ表示されるかを指定。fade:trueだと上手く表示されません。
slidesToScroll:1  一度にスライドする数
swipe:true  タッチスワイプに対応するかどうか
vertical:false  trueで縦方向へのスライドするようになります。
centerMode:true  centerMode:trueにしてないと使えない。前後の画像をチラ見させる時に、前後の画像をどれくらい見せるか設定できる。
centerPadding:’100px’  中央のpadding

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

Lazy Load(遅延読み込み)とは
最初にページを表示した時はファーストビュー意外の画像の読み込みはせずに、その画像が必要になった時に読み込みを行う手法のことを言います。ファーストビューを少しでも早く表示させる有効な手段です。
jQueryにもLazy Loadを行うライブラリ「Lazy Load Plugin for jQuery」が存在しています。

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