Slick SliderのcenterPaddingオプションで%指定したい・基本的な使い方

JavaScript

2022.03.29 2022.02.28

jQueryのプラグインでスライダーに使われるSlickですが、centerPaddingというオプションがあります。

centerPaddingはcenterModeというメインのスライドを中央表示する機能を利用しているときに、真ん中のスライドの左右両脇の空き具合を指定するオプションです。

centerModeを使用すると以下のような表示になります。

centerPaddingの基本仕様と実装サンプル

SlickのcenterPaddingパラメータは下記のように使用します。

jQuery(function($){
  $('.slider-01').slick({
    centerMode: true, // centerModeを有効にします
    centerPadding: "50px" // 数値はダブルクォーテーションで囲います
  });
});

基本的にcenterPaddingは「px」指定ですが、「%」も利用することが可能です。

centerPadding
string
’50px’
Side padding when in center mode (px or %)
https://kenwheeler.github.io/slick/

そこで、今回は中心にあるメイン画像の両脇にメインの半分の幅で表示する方法を採用しました。

以下に設置した実装例では、centerPaddingを指定していない状態です。

jQuery(function($){
  $('.slider-01').slick({
    centerMode: true,
    autoplay: true
  });
});

centerPaddingを指定せずに、centerModeをtrueにすると左右に50pxの余白が出来ます。

前述のとおり、Slick公式サイトに「px」だけではなく「%」も指定出来ると書いてあるので%指定したいと思います。

お恥ずかしいお話ですが、ずっと勘違いしておりまして「画像の幅の」50%を余白として出したい場合は、centerPadding: "50%"のように記述するものだと思い込んでいました……

実際にcenterPadding: "50%"としていすると真っ白（というより高さのないブロック）になってしまい、スライドが表示されません。

%指定出来ないじゃないか、と思い数値を1%に変えてやってみるときちんと表示されます。

jQuery(function($){
  $('.slider-02').slick({
    centerMode: true,
    centerPadding: "1%"
  });
});

あれ、微妙に隙間空いてる……
そもそもの%に対する仕様を勘違いしていたのです。

このオプションの%は親要素に対しての%ということなんですね。
なので、画像の50%分（半分）の空きを両端に入れたいときは、centerPadding: "25%"と指定しないといけなかったのです。

親要素を基準にスライダーの幅を%で表現すると、| 25% | 50% | 25% | になり、両脇は中央に対して50%（半分）になります。

実際にやってみると、

jQuery(function($){
  $('.slider-03').slick({
    centerMode: true,
    centerPadding: "25%",
    autoplay: true,
    autoplaySpeed: 1000
  });
});

無事に中央のスライダーの半分の余白を左右につけることが出来ました。
変な思い込みは時に身を滅ぼしますね。