カルーセルスライダーslickは、設置も簡単！
設置も簡単でオプションも豊富なslickスライダーを紹介します。
▶ カルーセルパネルってなあに？
公式サイト ▶http://kenwheeler.github.io/slick/
slick slider設置の手順
① データ一式ダウンロード
公式サイトから入手します。
▶http://kenwheeler.github.io/slick/#go-get-it
Download Now!
② データの確認と準備
解凍すると、様々なデータが同梱されていますが必要なデータは以下です。
データを一式「js」フォルダーへ格納します。(その方が、管理しやすいでしょう。)
| ローダー画像 | ajax-loader.gif |
| slick専用スタイルシート | slick.css |
| slick専用スタイルシート | slick-theme.css |
| slickプラグイン | slick.min.js |
| フォントフォルダー | fonts(フォルダごと一式) |
③ データを読み込む
レスポンシブに対応する場合は、ビューポートを忘れずに記述します。
(注)head内に記述する
準備したデータを読み込みます。リンク先など相違ないかを確認します。
(注)公式サイトにも、簡素なCDNが用意されていますので、参考にしてください。
You can also use slick with the jsDelivr CDN!
[code]
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
[/code]
④ 実行処理
●ページが読み込み完了し、DOMの構築が完了すると、function()内が実行されます。
(注)ファイルが複雑になってくると、管理や解読が困難になりますので、functionの処理の記述は、function.jsなど別ファイルに記述しても構いません。その場合は、前後<script></script>の記述は不要です。
(注)実行処理('.slider')は、クラスセレクタの場合、先頭にドット「.」が必要ですので、忘れずに。
(注)実行処理をさせるクラス名は、スライドを設置する箇所のクラス名と合致させてください。
⑤ スライドを設置する箇所に記述
リストや段落で、表示させる順番に記述します。
(注)実行処理で指定した同クラス名を充てること(サンプルはsliderとなっています)。異なっていると、認識しませんので、ご注意ください。④⑤が合致すれば、ID名でも認識します。
slick sliderの豊富なオプション！
slick sliderには、実に豊富なオプションが用意されています。様々な実行処理の記述を紹介します。
▶ slicksliderオプションサンプルを見る