jQueryベースのレスポンシブ対応カルーセル決定版slick。

幅広くカスタムできて、レスポンシブも対応、その上商用利用も可能…。
日本語での解説記事も豊富で初心者でも扱いやすいjQueryプラグインになっているのですが、上手く動かない事も稀にあります。

今回は、そのslickのslidestoshowオプションで動作しなかった際の備忘録になります。

問題点

slickのslidestoshowオプションは、一度に表示するスライド数を指定します。

数値を設定しておくだけなので、通常は特に問題なく動くはずです。

が、このslidestoshowオプション、スライドする要素が指定した数より多いの場合にのみ動作します。

<ul>
 <li>スライドするアイテム</li>
 <li>スライドするアイテム</li>
 <li>スライドするアイテム</li>
</ul>

$(function () {
 $('ul').slick({
  slidesToShow: 3
 });
});

上記ようにスライドしたいliの数が、slidesToShowに指定した値以下だと動きません。

JSにもHTMLにも構文エラーは無いので、一見するだけでは原因が把握し辛く、この知識が無いと泥沼にはまってしまいます…。

また、例えばこのスライドするアイテムをお客様が更新する画像などにしていると、投稿数によっては動作しなくなってしまうため、注意が必要です。

解決方法

これを避けるために、スライドしたい要素をjQueryで複製します。

$(function () {
 let slidesToShowNum = 3; //slidesToShowに設定したい値を挿入
 /* slidesToShowより投稿が少ない場合の処理▽ */
 let item = $('li').length; //liの個数を取得
 if (item <= slidesToShowNum) {
  for ( i = 0 ; i <= slidesToShowNum + 1 - item ; i++) { //足りていない要素数分、後ろに複製
   $('li:nth-child(' + i + ')').clone().appendTo('ul');
  }
 }
 /* slidesToShowより投稿が少ない場合の処理△ */
 $('ul').slick({
  slidesToShow: slidesToShowNum, //slidesToShowNumに設定した値が入る
 });
});

これで、要素が複製されてスライドが問題なく動作できるようになります。

注意点として、要素を複製してslidesToShowの発動条件を満たしているだけなので、スライドするアイテムの内容によっては同じ内容のものが流れ続けて不自然になってしまいます。

この不自然さが気にならない様なコンテンツをスライドする場合は、上記のコードで解決するかと！