Slickで中央のスライドだけ拡大表示する方法【centerMode＋CSS】

公開日: 2023.02.16
最終更新日: 2026.07.17

スライダーの中央のスライドだけを大きく見せ、両隣を少し小さく配置する——インパクトのあるカルーセルでよく見かける表現です。slickなら、この「真ん中だけ拡大」を数行のCSSで実現できます。

結論から言うと、slickのcenterModeで前後のスライドを見せつつ、CSSですべてのスライドを縮小し、中央のスライド（.slick-center）だけ元のサイズに戻すのがポイントです。この記事では、slickの読み込みからHTML・JS・CSSの記述、各設定の意味、そして調整のコツまでを順に解説します。

1 仕組み：縮小しておいて中央だけ戻す
2 slickを読み込む
3 HTML・JS・CSSを記述する
4 各設定のポイント
5 調整のヒント
6 まとめ

仕組み：縮小しておいて中央だけ戻す

この表現の肝は、発想の順序です。中央だけを拡大するのではなく、いったんすべてのスライドを縮小しておき、中央のスライドだけを通常サイズに戻すと考えます。

slickは、centerModeを有効にすると中央のスライドにslick-centerというクラスを自動で付与します。このクラスを目印にCSSを切り替えることで、中央だけが大きく見える状態を作れるというわけです。

slickを読み込む

まずはslick本体を読み込みます。CSSは<head>内、JavaScriptは</body>の直前に記述するのが一般的です。

<!-- css -->
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css">

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>

slickはjQueryに依存するため、必ずjQuery本体を先に読み込んでおきます。

HTML・JS・CSSを記述する

次に、HTML・JavaScript・CSSをそれぞれ用意します。まずはスライド画像を並べたHTMLです。

<div class="slide">
  <img src="slide-1.jpg" alt="">
  <img src="slide-2.jpg" alt="">
  <img src="slide-3.jpg" alt="">
  <img src="slide-4.jpg" alt="">
  <img src="slide-5.jpg" alt="">
</div>

続いて、slickを初期化するJavaScriptです。centerModeとcenterPaddingで、中央の両サイドに前後のスライドをのぞかせます。

<script>
$(function () {
  $('.slide').slick({
    autoplay: true, // 自動再生ON
    dots: true, // ドットインジケーターON
    centerMode: true, // 両サイドに前後のスライド表示
    centerPadding: '200px', // 左右のスライドのpadding
    slidesToShow: 1, // 一度に表示するスライド数
  });
});
</script>

最後に、拡大・縮小を担うCSSです。すべてのスライドを70%に縮め、中央の.slick-centerだけを等倍に戻しています。

.slick-slide {
  height: auto;
  transform: scale(.70); // スライドのサイズを70%にする
  transition: opacity .5s, transform .5s; // スライド透過率と拡大のアニメーション時間を0.5秒に設定
  width: 100%;
}

/* 中央のスライド */
.slick-center {
  transform: scale(1); // 中央のスライドは小さくしない
}

これで、中央のスライドだけが拡大されたように見えるカルーセルが完成します。

各設定のポイント

仕上がりを左右する要素を整理しておきます。

centerPadding：両隣のスライドをどれだけのぞかせるかの余白。値を大きくすると隣が広く見え、小さくすると中央が主役になる
transform: scale()：縮小率。.70を.85にすれば拡大と縮小の差が控えめになり、.5にすれば差が際立つ
transition：中央へ移動するスライドがふわっと拡大するアニメーション。この一行があるかどうかで印象が大きく変わる

transitionをtransformにも効かせているため、スライドが中央に来た瞬間にサイズが切り替わるのではなく、なめらかに拡大します。この滑らかさが、真ん中拡大スライダーの見栄えを決めるポイントです。

1点コツを挙げると、スライドに使う画像の縦横比（アスペクト比）は揃えておくのがおすすめです。高さがバラバラだと、拡大・縮小したときに上下の位置がずれてガタついて見えてしまいます。object-fit: cover;で高さを固定するなど、画像側のサイズをそろえておくと、拡大表示がぴたりと決まります。

またautoplayと組み合わせると、スライドが自動で送られるたびに中央が入れ替わり、拡大するスライドが次々と切り替わる動きになります。手動送りだけにしたい場合はautoplayをfalseにしてください。

調整のヒント

スマホではcenterPaddingの200pxが大きすぎて中央のスライドが窮屈になることがあります。画面幅に応じて40px程度に狭めるなど、レスポンシブで値を調整すると収まりがよくなります。slickのresponsiveオプションでブレークポイントごとにcenterPaddingを切り替えると、スマホでもきれいに見せられます。なおcenterModeは中央を1つ強調する性質上、slidesToShowを奇数（1や3）にすると左右対称になり、収まりよく見えます。