東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2020.06.15

taka

備忘録 slickでslidesToshowの値を可変にする方法

こんにちは。Maromaroのtakaです。
slickslideToshowslickで画面に表示する枚数の設定)の値を可変にしたいと思ったことはありませんか?
表示したい画像数を設定した時に、場合によっては指定した数より少ない枚数の画像しかない場合など、
あるかと思います。指定した枚数より少ない場合は画像の表示がおかしくなることが多々発生します。
そんな時にslick可変に出来ると表示も崩れず、良い感じになります。
今回は備忘録として上記内容を記事にしました。

そもそもslickとは?

webサイトのトップページなどに多くみられる、画像やコンテンツを左右に切り替える、
スライダー slider(カルーセル carouselとも)

jQueryのプラグインとして色々なスライダーが提供されていますが、
中でも設定の簡単さとオプションの充実度からよく利用されているのが『slick』です。

slickの特徴

  • レスポンシブ対応(オプション内で簡単に設定できるためとても重要かつ便利)
  • 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可能
  • タッチデバイス対応
  • IE8以上で動作(スライド数のドットの色は変化しません)
  • 縦カルーセル、横カルーセル対応
  • 画像遅延読み込み可
  • MITライセンス(オープンソースソフトウェアのライセンスのひとつで、無料で自由につかうことができます

導入方法に関しては割愛致します

実装方法

<HTML>

 
<ul id="slick01">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

上記HTMLのようなリストがあった時、

例えば、表示したい画像の枚数が5枚だった場合、
まずSlidesToshow_val に 初期枚数を設定し、
slidesToshow_leng = $(‘ul li’).length とすることで、
slidesToshow_lengに現在のリストの数を数値として代入します。
(現在 li は4つなので4が代入されます)
そしてif文でslidesToshow_leng < slidesToshow_val とすることで、
設定値より低かった場合にその値をslidesToShowに代入すれば、
基本の設定値を5としつつ、5未満だった場合にその値を基本へとすることができます。
下記はその例となるコードです。

<JS>

 
$(function(){
var slidesToshow_val = 5;
var slidesToshow_leng = $('ul li').length;
  if(slidesToshow_leng > slidesToshow_val){
    slidesToshow_val = slidesToshow_leng;
  }
 $('#slick01').slick({
   slidesToShow:slidesToshow_val,
   autoplay:true,
   autoplaySpeed:1800,
   centerMode:true,
 });
});

基本的にこうするであろう想定の場面は、
OptionのcenterModeで中央表示にした場合、
slidesToShowに設定した値より、少ない数のリストが入った場合に、
表示が崩れてしまうことがあるからです。

まとめ

上記を設定するだけ、簡単にslickを可変で動かせるようになるので、ぜひ試してみてください。

以上、takaでした!