Slickの導入方法（動画あり） | IT工房

Webのページにスライドショーを導入する場合、人気があるのがjQueryでできたslickが人気です。
レスポンシブレイアウトにも対応しており、スマホにも使えます。
ところが、初心者にはなぜか導入がうまくいかないという声も多いです。
今回は動画を使いながら、Web初心者でも組み込めるように説明しています。

Slickの設定
optionの内容
参考になった書籍
サンプルのダウンロード

Slickの設定

Slick本家のページ Slick本家のページに行きます。

Homeページはdemoのページになっていますので、どのようなスライドショーを作りたいか確認しておきます。
次に「get it now」のページでダウンロードすることができます。

ダウンロードしたzipファイルを展開して、その中の「slick」フォルダを使います。
「slick」フォルダ内のファイルで必要なものは、「ajax-loader.gif」、「slick-theme.css」、「slick.css」、「slick.min.js」、と「fonts」フォルダです。これらのファイルを「slick」フォルダごと自分のサイトフォルダに入れます。

次に、slick本家ページの「usage」ページから次の内容を自分のページにコピペします。
動画では詳細に説明していますので参考にしてください。

スライドショーの本体部分
「your-class」部分はまともなクラス名に変更します。
また、画像のスライドショーにするのならimgタグで画像を読み込んでおきます。

コピーしてきたコード

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

変更後コード

<div class="slide">
  <img src="images/photo1.jpg" alt="sweets1">
  <img src="images/photo2.jpg" alt="sweets2">
  <img src="images/photo3.jpg" alt="sweets3">
  <img src="images/photo4.jpg" alt="sweets4">
</div>

CSSのリンクはhead部分につけます。
「// Add the new slick-theme.css if you want the default styling」部分は消します。

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

スクリプトのリンクはbodyの終了タグの前です。
jQueryのライブラリはCDNで取得するようになっています。
//code.jquery.com/jquery-1.11.0.min.jsのアドレスはローカルPCからは繋がりません。
実際のコードを以下のように変更します。（サーバーにアップする際に元に戻しておきます）

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

Javascriptの部分は次のようにして、スクリプトのリンクの後に追加します。

<script>
$(document).ready(function(){
  $('.slide').slick();
});
</script>

それぞれのコピペの記述方法は動画を参考にしてください。

これでとりあえず手動ボタンのクリックで動くようになるはずです。

手動のボタンの位置と色が混乱を招きます。
こちらの対象方法も動画で説明していますので参考にしてください。

また、手動ボタンはアイコンフォントを活用しているようです。
色の変更やサイズの変更はフォントの設定と同様です。

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を使用する場合、２番目の画像から「src属性」を「data-lazy」とする必要があります。
slidesToShow:3	スライドのエリアに画像がいくつ表示されるかを指定。fade:trueだと上手く表示されません。
slidesToScroll:1	一度にスライドする数
swipe:true	タッチスワイプに対応するかどうか
vertical:false	trueで縦方向へのスライドするようになります。
centerMode:true	centerMode:trueにしてないと使えない。前後の画像をチラ見させる時に、前後の画像をどれくらい見せるか設定できる。
centerPadding:’100px’	中央のpadding