Slick.jsは、シンプルで使いやすいjQuery製のスライダープラグインですが、デフォルトではスライドの幅が親要素に応じて自動調整されます。「各スライドを画像の幅ぴったりに固定したい」「中央のスライドだけ大きく見せたい」といった場合には、少し設定が必要です。この記事では、Slick.jsでスライダー要素を任意の幅に固定する方法を、コード付きで紹介します。

結論を先に言うと、CSSでスライドの幅を指定し、Slick側でvariableWidth: trueを設定する、この2つの組み合わせで実現できます。

Slick.jsの基本設定

まず、Slick.jsに必要なファイルを読み込みます。jQueryとSlick本体のCSS・JSを読み込んでください。

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

<!-- JS（jQueryを先に読み込む） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="slick.min.js"></script>

次に、HTMLでスライダー要素を作成します。

<div class="slider">
  <div class="slide">スライド1</div>
  <div class="slide">スライド2</div>
  <div class="slide">スライド3</div>
</div>

スライダーの幅を固定するCSS設定

Slick.jsでは、スライドの幅が親要素に応じて自動調整されます。固定幅にするには、CSSで.slide要素のwidthを明示的に指定します。

.slide {
  width: 300px; /* 固定したい幅 */
}

ここでは例として300pxにしていますが、任意の値に変更できます。

Slick.jsのオプションを設定

CSSで幅を指定しただけでは、Slick側が幅を自動計算してしまい固定されません。そこで、Slickの初期化時にvariableWidth: trueを指定します。

$(".slider").slick({
  variableWidth: true,
  slidesToShow: 1,
  infinite: true,
});

variableWidth: trueを設定すると、Slickがスライドの幅計算をやめ、CSSで指定した幅をそのまま尊重するようになります。これでスライドが指定した幅に固定されます。詳しいオプションの挙動はSlick公式のvariableWidthの解説も参考になります。

まとめ

Slick.jsでスライダー要素を任意の幅に固定する手順は次の2つです。

1. CSSで.slide要素のwidthを指定する
2. SlickのオプションでvariableWidth: trueを設定する

この2点を押さえれば、スライダーの幅を自由にコントロールできます。中央のスライドを目立たせるcenterMode: trueと組み合わせると、両隣のスライドをちら見せするカルーセルも作れるので、あわせて試してみてください。