スライダーを作成するためのプラグイン「slick」のcenterModeを使って、実装イメージのように中央に2枚配置し、画像の余白を不均等にすることが一筋縄ではいかなかったので、その備忘録です。
<実装イメージ>
1.問題点
・centerModeでは中央に配置する枚数は奇数値推奨。
・centerModeでは画像間の余白は均等になるようになっている。
・中央配置された時に付与されるclass、slick-active / slick-center / slick-currentを余白の調整に活用したいが、スライドが切り替わった後に付与されるため、見た目の調整はできるがスライドがガタつく。
※コールバック関数「beforeChange」との組み合わせもチャレンジしてみましたが、部分的にガタつく…
2.解決策と実装サンプル
#2-1.centerModeを使用するための基本設定
「slick」の導入方法は基本通りなので省略します。導入ができたら、html、jsファイルに下記のように記述します。
HTML
こちらも基本通り。※構造はul、divどちらを使用しても大丈夫です。
<div id="gallery-slider">
<div class="gallery-slide">
<img src="images/item01.jpg">
</div>
<div class="gallery-slide">
<img src="images/item02.jpg">
</div>
<div class="gallery-slide">
<img src="images/item03.jpg">
</div>
<div class="gallery-slide">
<img src="images/item04.jpg">
</div>
</div>
JavaScript
$(function() {
$("#gallery-slider").slick({
centerMode: true,
centerPadding: '0',
/*左右の画像の余白を0にする*/ slidesToShow: 2,
/*中央に2枚配置する*/ variableWidth: true,
});
});
CSS
slickでは画像の横並びにfloatを指定していますが、float: none;にしflexを使用し、画像の余白調整にgapを使います。
#gallery-slider .gallery-slide {
width: 100%;
max-width: 438px;
}
#gallery-slider .slick-track {
float: none;
display: flex;
gap: 100px;
}
#2-2.中央に2枚配置する
基本設定をした状態です。2枚を中央に配置できていません。
黄色の線で囲った2枚を中央に持ってきたいので、画像の幅（438px）の半分と、余白（100px）の半分を左に移動させます。
(438 / 2) + (100 / 2) = 269pxleft: -269px;の指定をし、中央に画像2枚を移動させることができました！
CSS
#gallery-slider .slick-track {
float: none;
display: flex;
left: -269px;
gap: 100px;
}
#2-3.画像の余白調整
こちらの記事を参考にセレクタでアクティブな画像（左）、アクティブな画像（右）、アクティブではない画像を識別し、アクティブな画像、それぞれに、transformを使用し余白の調整をしました。
1.アクティブな画像（左）
.slick-center,
.slick-slide[aria-hidden="true"]:not([tabindex="-1"])+.slick-cloned[aria-hidden="true"] {
transform: translate3d(36px, 0, 0);
opacity: 1;
}
2.アクティブな画像（右）
.slick-active:not(.slick-center),
.slick-slide[aria-hidden="true"]:not([tabindex="-1"])+.slick-cloned[aria-hidden="true"] {
transform: translate3d(-36px, 0, 0);
opacity: 1;
}
3.アクティブではない画像
.slick-slide,
.slick-slide[aria-hidden="true"]:not(.slick-cloned)~.slick-cloned[aria-hidden="true"] {
opacity: .5;
}
ガタつきもなく、余白の調整できました！
あとは、アクティブではない画像にopacityで透過にしたり、矢印ボタンを調整すれば完成です！…が2週目に突入するときに、ガタつきが…….
これは、csnterModeのバグらしく、こちらの記事を参考に調整しました。
▼slickカルーセルのcenterModeで中央以外を透過にした場合に2周目からがたつく
https://qiita.com/daipdaip/items/d2fbcc6e47cfd4cd619a
3.参考サイト
こちらの記事を参考にさせていただきました。
▼Slick Center Mode – Animations Bug between last and first slide #3271
https://github.com/kenwheeler/slick/issues/3271
▼slickカルーセルのcenterModeで中央以外を透過にした場合に2周目からがたつく
https://qiita.com/daipdaip/items/d2fbcc6e47cfd4cd619a
