![見出し画像](https://assets.st-note.com/production/uploads/images/60197311/rectangle_large_type_2_d65419b3ba4e50d09bb5eab2c8709acd.jpg?width=1200)
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
この記事が気に入ったらサポートをしてみませんか?