（2016年6月15日若干修正）
レスポンシブウェブデザイン化する際に重宝され始めた、ぬるっと画像がスライドするカルーセル表示。
そのカルーセルを簡単に導入する事ができるJQueryプラグインslickの導入方法を紹介する。
（デモページ）
導入に際して、結構な数のブログでその方法を紹介していたけど、矢印が表示されない、ナビゲーションのドットが表示されない等の不具合が出るやり方をこぞって紹介していた。
ということで、上のスライドのようにちゃんと動作するやり方を試行錯誤の末やっと見つけたのでシェア♪
（といっても、やり方は超簡単だったけどｗ）
導入方法
①ファイルをダウンロード
公式ページからファイルをダウンロードする。
（ctrl＋Fで「Download Now」をページ内検索すれば、DL先が簡単に見つかる）
②ファイルをアップロード
cssディレクトリに以下をアップ。
- slick.css
- slick-theme.css
- fontフォルダ
- ajax-loader.gif
続いて、slick.min.js（内容を変更したいならslick.js）をjsディレクトリにアップする。
（注）他サイトでslick.cssだけで導入するような説明をされている場合があるが、そうすると、矢印が「Next」になったり、ナビゲーションの「・」が番号になったりする。
また、slick-theme.cssを編集しようとすると、文字コードがおかしくなって誤動作を起こす事が多々ある。
③ファイルの読み込み
上記CSSとJavascriptをJQUERYとともに読み込ませる。
<link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/slick.min.js"></script>
④htmlの準備
カルーセル表示させるためのhtmlを記述。
<div class="hoge"> <div><img src="test1.jpg"></div> <div><img src="test2.jpg"></div> <div><img src="test3.jpg"></div> </div>
⑤プラグインの実行
コードを任意の場所（</head>の直前等）に設置。
以下コードはクラス名をhogeとし、レスポンシブデザイン対応（ブレークポイント＝640pxと960px）した場合の例。
<script>
$(function(){
$('.hoge').slick({
slidesToShow:1,
slidesToScroll:1,
autoplay:true,
autoplaySpeed:2000,
responsive:[{
breakpoint: 960,
settings:{
arrows: false,
slidesToShow: 3
}
},
{
breakpoint: 640,
settings:{
slidesToShow: 1
}
}
}]
});
});
</script>
以下、必要になる可能性が高そうなオプションを列挙（赤文字はデフォルト）。
この他にもいろんなオプションがあるので、必要ならば公式ページでどうぞ♪
| オプション名 | 値 | 説明 |
|---|---|---|
| arrows | true/false | 前へ/次へのナビゲーション有/無 |
| autoplay | true/false | オートプレイの有/無 |
| autoplaySpeed | 数字（3000） | スライド切り替わり時間(ms) |
| cssEase | ease/linear/ease-in/ease-out/ease-in-out | アニメーション効果 |
| dots | true/false | スライド下のナビゲーションドットの有/無 |
| draggable | true/false | ドラッグの有/無 |
| fade | true/false | フェードイン表示の有/無 |
| infinite | true/false | 無限ループの有/無 |
| initialSlide | 数字（0） | 最初のスライド位置 |
| pauseOnHover | true/false | ホバーした際に自動再生を止めるかどうか |
| responsive | 上記参照（null） | レスポンシブ表示設定 |
| slide | タグ名（div） | スライドする要素を内包するタグ名 |
| slidesToShow | 数字（1） | いくつスライドが見えている状態にするか |
| slidesToScroll | 数字（1） | スライドする数 |
| speed | 数字（300） | スライドアニメーションにかかる時間(ms) |
| swipe | true/false | タッチスワイプの有/無 |
| touchMove | true/false | タッチでスライドの有/無 |
| vertical | true/false | 縦方向のスライドの有/無 |
以上、動きがスムーズでオプションも多く、安定しているjQueryプラグインslickの導入方法でした☆
コメント
はじめまして。
テーマ、Bizvektorを利用しています。
ブログを参考に、カルーセルを設定いたしましたが、画像が縦並びになりうまく作動いたしません。
>手順２ファイルをアップロード
>cssディレクトリに以下をアップ。
cssディレクトリとはBizVektorのどの部分になるのでしょうか？
よろしくお願いいたします。
コメントありがとうございます♪
ちょっと説明文が分かりにくかったですね。
すみません(^^A
「②ファイルをアップロード」で言っているCSSディレクトリとjsディレクトリは、それぞれ、使ってるテンプレ内でCSSファイルを置いているディレクトリと、Javascriptファイルを置いているディレクトリを指しています。
つまり、BizVektorなら「wp-content/themes/biz-vektor」の直下にあるCSSディレクトリ、jsディレクトリになるかと思います。
で、アップ後は、
<link rel="stylesheet" href="http://○○○.com/wp-content/themes/biz-vektor/css/slick.css">
とかで、その場所を指定してあげて、その後の手順通りしていけばうまくいくと思いますよ。
管理人様
教えていただきありがとうございます。
おかげさまで上手く作動しました。
大変参考になりました。
はじめまして、コメント失礼致しますm(_ _)m
初心者向けのカルーセル設置方法を探していた時に、こちらの記事にたどりつきました。
分かりやすいご解説が、とても勉強になりました。
本当にありがとうございます。
わからないことが１つありましたので、質問させていただいてもよろしいでしょうか？
「⑤プラグインの実行」という項目についてです。
書かれている文字列ですが、どのファイルに入力したらよいのでしょうか？
ド素人まるだしの質問で、本当に申し訳ありません！
当方、HTMLとCSSは分かるのですが、それ以外の分野はまったく…なのです^^;
ググレカス！でも構いません。
何と検索すればいいのかだけでも、教えていただけると助かります。
（「カルーセル 実行 入力」など検索してみたのですが、どうも正解に行き着けません）
ちなみに、管理人様のデモページソースを参考に、とりあえず下記のように入力してみたのですが・・・
やはり間違っているのでしょう、アップロードしても作動しませんでした。
－－－－－－－－－－－－－－－－－－－－
～中略～
$(function(){
$(‘.hoge’).slick({
slidesToShow:1,
slidesToScroll:1,
autoplay:true,
autoplaySpeed:2000,
responsive:[{
breakpoint: 960,
settings:{
arrows: false,
slidesToShow: 3
}
},
{
breakpoint: 640,
settings:{
slidesToShow: 1
}
}
}]
});
});
－－－－－－－－－－－－－－－－－－－－
お手すきの時で構いませんので、なにかご指南いただけましたら幸いです。
どうぞよろしくお願い申し上げますm(_ _)m
はじめまして。コメントありがとうございます。
「⑤プラグインの実行」についてですが、Javascriptでの記述になりますので、
<script> ～ </script>
で囲わなくてはなりません。
すみません。説明に配慮が足りなかったですね(^^A
⑤の項目、軽く修正しておきましたので、もう一度試してみてください。
あと設置場所に関しては、
基本的に、実行されるhtmlファイル（PHPファイル等も可）内のどこであっても動作はします。
ただ、一般的には</head>の直前かなぁと思います。
（私の場合は、他の部分の表示速度を優先したいので、</body>の直前に入れる事が多いですが）
早速のお返事、本当にありがとうございました！
な、なるほど…
で囲んであげればよかったんですね。
うまくいかなかった理由がやっとわかりました。
管理人様のデモページソースを参考に、
＜ｈｅａｄ＞
$(“ｄocument”).ｒeady(ｆunction(){
（略）
});
＜／ｈｅａｄ＞
と書いてみたりもしていたのですが、そりゃ、動かないはずですね(^A^;)
教えていただいた今となっては、手本の一行目にしっかり書いてあったを、
なぜ抜かしてしまっていたのか、逆に不思議です…（苦笑）
なお、前のコメントを投稿したとき、ソース見本のなかに
なども記入していたのですが、投稿時にその文字列が消えてしまったようです。
これでは意味が伝わらないぞと思い、コメントを追記したりもしたのですが、なぜか投稿できず…
そんな内容でご理解いただけるかどうか不安だったのですが、
完璧なご返答をいただけて、本当に本当に助かりました。
他の記事も拝見して、さらに勉強させていただきますね！
ありがとうございました♪
心より感謝
コメントの連投、すみません。
特定の文字列が消されてしまうようなので、文章の意味が伝わらないところを修正させて頂きます(^^;)
▼で囲んであげればよかったんですね。
▼＜ｈｅａｄ＞
$(“ｄocument”).ｒeady(ｆunction(){
（略）
});
＜／ｈｅａｄ＞
▼手本の一行目にしっかり書いてあったを、
▼ソース見本のなかになども
…というような文章になります。
今回は前もって全角文字で入力してみたのですが、
それでも良くなかったようなので、日本語で記述させていただきました（笑）
度重なる連投ですみませんm(_ _)m
どうやらコード関係の文字列は、ひらがなで書くのもアウトみたいですね(^^;)
文章的には「？？？」かもしれませんが、
ありがとうの気持ちだけでも管理人様へ伝わったらいいなと思います！
失礼いたしました～
はじめまして。
とても参考になり感謝しております。ありがとうございます。
ひとつお聞きしたいのですが、矢印ボタンを押してスライドした時に、
写真などの周りに水色のアウトラインが入ってしまいます。
こちらを消す方法はないでしょうか？
お手すきの時で構いませんので、ご指南お願いいたしますー。
コメントありがとうございます。
サイトを見てみないと何とも言えないですが、CSSの問題の可能性はあると思います。
まずは、想定外のCSSが適用されていないかチェックしてみると良いかもですね。
早いお返事ありがとうございます！
cssを全てチェックし.slick-slideにoutline: none;を入れることで消すことができました！
どのサイトよりも分かりやすい説明で、とても勉強になりました。
おかげで素敵なホームページができそうです。
今後もお世話になると思いますがよろしくお願いいたします。
ありがとうございました！