jQueryカルーセル「slick.js」の使い方まとめ

今回は自分がWeb制作する際によくスライダーやカルーセルなんて呼ばれているものを実装する時によく使うの「slick.js」を紹介します。
※個人的にカルーセル呼びに慣れているので、本記事ではカルーセルで進めていきます。

slick.jsの機能

主な機能や特徴は以下のようになります。

  • レスポンシブ対応
  • ブレークポイント毎に細かい設定が可能
  • タッチデバイス対応
  • 縦・横カルーセル対応
  • 画像遅延ロード機能
  • MITライセンス

これ以外にもかゆいところに手が届く仕様になっていますが、主だったものはこれぐらいですね。

slick.jsの使い方

それでは早速使い方の説明をします。

公式サイトからファイルをダウンロードして、解凍したファイル内にslickフォルダが使用するファイルになります。

中の構成は以下のようになっていますが、実際に使うファイルは太字のファイルのみあれば大丈夫です。

slick
fonts
slick-theme.css
slick.css
ajax-loader.gif
├slick.js
slick.min.js
├config.rb
├slick-theme.less
├slick-theme.scss
├slick.less
└slick.scss

HTMLに記述する場合は、以下のような感じです。

設置が終わったら次は最低限のソースで動くカルーセルを作ります。

カルーセルのサンプル

画像だけでなくテキスト(ブロック要素にCSSで変更済み)も動かすことが可能です。

js側の記述を見れば分かる通り、動かすだけなら以下の記述だけでOK!

要は動かしたい親要素のclassまたはidを指定するだけなので、簡単に終わります。
これだけでもPC/SP両方対応できています!

ただ、これだけだとさすがに味気ないので、ちょっと変更したのがこちらのサンプルです。

変更したjsの内容はこんな感じになってます。

最初のサンプルから変更した箇所は、
・カルーセル下部にドット表示
・自動再生
・センターモードに変更
・センターモード時の左右のpadding設定

slick.jsはオプションが豊富で上記のような設定が細かくできます。
レスポンシブ対応で表示サイズ毎に調整するのも可能です!

こちらは表示サイズが768px以下と480px以下でレイアウトが変更されます。

簡単なカルーセルの実装であればこれだけでほぼ対応は出来てしまいます。
というか自分がそうでしたw

オプションについて

オプションは上記に書いたようなものの他にも色々あるので、なにか変更を加えたい時はまずGitHubにあるドキュメントを確認してみてください。

まとめ

今回はjs部分だけの説明でしたが、CSSもカスタマイズしていくと更に色々な表現ができるようになるので、ぜひ試してみてください!!