たまに見る形。
完成イメージ
ブラウザ幅いっぱいにスライド領域がある。スライドのサイズはブラウザ幅以下で中央配置、余白になる左右には前後のスライドがちらっと見える。ブラウザ幅を狭めてもスライドのサイズに到達するまではスライドのサイズは変わらない（固定）。みたいな感じ。
たまに検索で出てくるcenterModeと余白の％指定で構築する方法は可変デザインだと無理がある。タブレット幅とかSP幅とかまで狭めると％指定のおかげでかなり小さくなってしまう。スライドが小さいとわけわからんくなるし、縮小するにせよまずは余白を削ってからでいいじゃない、という話。
はじめに
slick.jsのoption設定じゃ実現できない。cssをいじることになる。
スライドショー導入にあたってライブラリやらプラグインを提供されている範囲外の領域で編集するのは正直好きじゃないし、一時期は手を入れなきゃ話にならなかったのが最近では落ち着いてきて安心してた。だけどまだ足りないというか、なんというか。
ニーズと合ってないというのもなんか違う気がする、スライドショーのフォーマットと実際の設置に齟齬というかなんというか、食い違ってるところがあるのは、単純にデザインのブームとスライドショー本来の機能とがズレてる、みたいな。惜しいレベルの微妙な機能がついてたりするのは歩み寄りのためかもしんないんであんまり下手なことは言えないんだけど。
やる
画像の幅を1200pxとして話を進める。
まず、親要素が必要になる。
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section>
<div class="slider">
<div class="slide"><picture><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
<div class="slide"><picture><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
<div class="slide"><picture><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
<div class="slide"><picture><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
</section>オプション設定はcenterModeが必須。
$('.slider').slick({
centerMode: true,
});
で、ネックになるCSS。
section{
width: 100%;
overflow: hidden;
}
.slider{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.slider .slick-list{
overflow: visible;
}.slick-listを開放するのでブラウザ幅をぶち抜くことになる。そのケアとして親にoverflow:hidden;を充てる。そのままだとメインのスライドが左詰めなのでmarginで中央に寄せる。
これで完成。
ちなみにfade:trueの場合、スライドは横並びじゃなく重なることになる。
レスポンシブへの対応
SP用レイアウトとかになると画面が小さいので前後のスライドをチラ見せしなくてもよくない？とかになる。そしたら通常通り1枚だけ表示するようにすればいいんでcenterModeを止める。css周りは、上記の内容だと最大サイズの指定しかしてないので放置して平気。overflow:hidden;がたまになにかに悪さをしたりするんで、そういうのが嫌だとか影響しそうな組み方をしている人はcssもいじる。
$('.slider').slick({
centerMode: true,
responsive: [{
breakpoint: 1198.98,
settings: {
centerMode: false,
}
}]
});ここに関しては設置する画像の幅というか、スライドのサイズに準拠したbreakpointの指定になるのがポイント。cssも含めて。
そんな感じで。
コメント