SlickのcenterModeで中央に2枚配置する方法

スライダーを作成するためのプラグイン「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) = 269px

left: -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