東京都府中市、九段下のWEB制作会社Maromaroのブログです

2024.05.13

taka

Slickでスライドの中央を大きく表示させる方法

こんにちは
MaromaroのTakaです。

今回はSlickでスライドの中央を大きくし表示させる方法について解説します。

まずは以下のサンプルでどのような状態かを見て下さい。
※0.5xサイズで見ると分かりやすいです。

See the Pen Untitled by 佐々木貴徳 (@efhpwfmt-the-animator) on CodePen.

スライドを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はやろうと思えばいろいろな魅せ方ができますが、
なるべくデフォルトの機能を少し弄るだけで表現したいですね。