2021年06月21日

slick.jsを使う際の注意点

みなさんこんにちは。
クリエイターの白石です。

今回は、「slick.jsを使う際の注意点」について
情報を共有したいと思います。

折りたたむ /表示

■slick.jsとは？？
■Slick.jsを使うメリット
1. ①レスポンシブ対応しやすい
2. ②オプションが多い
■Slick.jsを使う際の注意点
1. ①jQuery依存のため読み込みが遅い
2. ②ul、liタグを使ってマークアップすると、HTML構造がおかしくなる

■slick.jsとは？？

———————————
Webサイトで、複数枚の画像を次々と切り替えて表示しているのよく見かけると思います。
このような見せ方をスライダーと呼び、JavaScriptで実装しています。

そして、このスライダーをより簡単に実装するためのプラグインの１つに
「slick.js」というものがあります。
「slick.js」はサイズや動き、見せ方が簡単にカスタマイズできて、
かつレスポンシブデザインにも対応した表示ができるため汎用性の高いプラグインだと感じています。

ですが、実際に利用しているといくつか注意点が出てきたのでまとめておきます。
?

■Slick.jsを使うメリット

———————————

①レスポンシブ対応しやすい

「slick.js」は設置の仕方が簡単で、
複数枚の画像のうち、１画面に表示する画像の枚数を決めるだけ。

どんな画面サイズの端末でも、スライド画像の縦横比を保ったまま、
拡大・縮小を調整して見た目よく表示してくれます。

最近はスマホもPCも１つのHTMLで作成するレスポンシブデザインが多いので
スマホでもPCでも自動でサイズ調整してしてくれるのは助かります。

②オプションが多い

上記では「複数枚の画像のうち、１画面に表示する画像の枚数を決めるだけ。」
と書きましたが、もちろん、スピードや切り替え方法など細かい調整をすることも可能です。

このカスタマイズのために用意されているオプションの種類が多く
自身のデザインに合わせた、様々な場面、見せ方に調整にし易いのもメリットの１つです。
?

■Slick.jsを使う際の注意点

———————————

①jQuery依存のため読み込みが遅い

「slick.js」はjQuaryを使って作られているため、事前にjQueryを読み込む必要があります。
jQueryは読み込みに時間が掛かるため、
これを使っている「slick.js」も読み込みが遅くなってしまいます。

実際、画像の表示や動き出しに時間がかかったりするため
ファーストビューで表示されるスライダーに使用する場合は、注意が必要です。

動き出しまでの間の表示が崩れないようcssで調整したり、
なるべく画像のサイズ（容量）を小さくして、画像自体の読み込みの負荷を減らす対応が必要です。
場合によっては「slick.js」を使わない
→jQuaryを使わない、JavaScriptだけで作成したスライダーを検討した方が良いかもしれません。

②ul、liタグを使ってマークアップすると、HTML構造がおかしくなる

複数枚の画像を並べて表示するので、ul、liタグを使ってマークアップしたくなるのですが、
divを使ってマークアップした方がよさそうです。

というのも、「slick.js」を使うと自動で生成されるdiv要素があり
これがul、liタグの親子関係の間に来てしまうからです。
現時点（2021/05/21）ではulタグ直下の子要素にはliタグしか入れられない！
というルールのため、構造的におかしいなことになってしまいます。
そのため、これを回避するにはdivを使ってマークアップした方がよさそうです。

こちらの記事も人気です。あわせてどうぞ

#width指定が効かない？Flexboxは子要素の横幅指定がポイント

#画面サイズが変わっても、画像を伸び縮みさせずに表示させる方法

#タブレットはPC表示？スマホ表示？