jQueryのプラグインでスライダーに使われるSlickですが、centerPadding
というオプションがあります。
centerPadding
はcenterMode
というメインのスライドを中央表示する機能を利用しているときに、真ん中のスライドの左右両脇の空き具合を指定するオプションです。
centerMode
を使用すると以下のような表示になります。
centerPaddingの基本仕様と実装サンプル
SlickのcenterPadding
パラメータは下記のように使用します。
jQuery(function($){
$('.slider-01').slick({
centerMode: true, // centerModeを有効にします
centerPadding: "50px" // 数値はダブルクォーテーションで囲います
});
});
基本的にcenterPaddingは「px」指定ですが、「%」も利用することが可能です。
centerPadding
https://kenwheeler.github.io/slick/
string
’50px’
Side padding when in center mode (px or %)
そこで、今回は中心にあるメイン画像の両脇にメインの半分の幅で表示する方法を採用しました。
centerPaddingはデフォルトで50px
以下に設置した実装例では、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
});
});
無事に中央のスライダーの半分の余白を左右につけることが出来ました。
変な思い込みは時に身を滅ぼしますね。