2024.05.13
Slickでスライドの中央を大きく表示させる方法
こんにちは
MaromaroのTakaです。
今回はSlickでスライドの中央を大きくし表示させる方法について解説します。
スライドをcenterModeにし、中央にカレントスライドを持ってきた場合に使える方法ですね。
中央のスライドに対して、サイズを大きくする処理を追加しています。
実装方法
まずはHTMLでslickスライダーを設置します。
※HTMLについては特に特殊なことはありません。
<ul id="slider">
<li class="slide">
<img src="img01.jpg" alt="">
</li>
<li class="slide">
<img src="img02.jpg" alt="">
</li>
<li class="slide">
<img src="img03.jpg" alt="">
</li>
</ul>次にCSSを記述します。
中央のスライドが大きくなるような仕掛けを入れます。
.slide{
transform: scale(.8);
transition: transform .3s;
width:300px; //適宜変更
}
.slide img{
width:100%;
}
.slick-center {
transform: scale(1);
}slickの中央のスライドには「.slick-center」クラスが付与されるので、
それを利用し中央以外のスライドに対して小さくなるようにし、
中央にスライドが来たら大きくなるように見せます。
最後に要となるJS（JQuery使用）を記述します。
$("#slider").slick({
autoplay: true,
dots: true,
arrows: true,
variableWidth: true,
centerMode: true,
});上記で重要な部分は、
「variableWidth」と「centerMode」をtrueにする部分です。
スライドを中央寄せにし、左右のスライドをチラ見せさせるために必要となります。
以上がスライダーの中央を大きく見せる方法です。
Slickはやろうと思えばいろいろな魅せ方ができますが、
なるべくデフォルトの機能を少し弄るだけで表現したいですね。
