slickメモ

今まで何回もお世話になっているカルーセルプラグイン「slick」。

jQueryが使われてることを確認したら基本的にカルーセル（スライダー）実装にはslickを使ってます。

オプションがとても多くて、なんでもできる！

が、

本当になんでもできると思って使うと、

痛い目にあう！

すでに何回かあってるので繰り返さないためにざっくばらんにメモしときます。

気づいたときに増えていきます。

・centerModeオプションを使うときslidesToShowは奇数にする

これは公式でも書いてますね。

以下にイメージを。（スライド数は8マイを想定）

slidesToShow: 2

https://gyazo.com/43001522e07e4e45dd8d84e11456ae12

slidesToShow:4

https://gyazo.com/dfe201427180f57cc53eaad386500c4b

見てわかると思うのですが、中心のスライドの右側がcurrentとして扱われます。

そしてその前後がactiveになります。

この仕様を気にしなければ一応使えます。

→ただ上のイメージが動くだけのサンプル

・centerModeオプションを使うとslidesToScrollは無視される

まさかの。

以下参照。回避策あり。

・色々ラッパー要素がぶち込まれるので、実装はdivで行なう

ul>li使いたくなりますが、そうしちゃうとulの直下に色々挿入されるので、おかしなHTMLになります。

・ページ読込の時、一瞬縦並びで表示される

cssに以下を追加

code:sample.css

.slider { /* slickさせたい要素 */

display: none;

}

.slick-initialized {

display: block;

}