【slick】スライダー要素を任意の幅に固定する方法

Slick.jsは、シンプルで使いやすいjQuery製のスライダープラグインですが、デフォルトの設定ではスライドの幅が自動調整されるため、任意の幅に固定したい場合には少し工夫が必要です。

本記事では、Slick.jsでスライダー要素を特定の幅に固定する方法を紹介します。

Slick.jsの基本設定

まず、Slick.jsを使用するために必要なファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick-theme.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.min.js"></script>

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

<div class="slick">
    <div class="slide">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
</div>

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

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

.slick .slide {
    width: 300px;/* 各スライドの幅を固定 */
}

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

CSSだけではスライドの幅を固定できないため、Slick.js側でもオプションを指定します。

$(document).ready(function() {
    $(".slick").slick({
        autoplay: true, // 自動でスクロール
        variableWidth: true, // スライド幅の自動計算を無効
    });
});

ここで、variableWidth: trueを設定することで、スライドの幅がCSSで指定した値に固定されるようになります。

詳しくはこちらを参照ください。

まとめ

Slick.jsでスライダー要素を任意の幅に固定する方法を紹介しました。

1. CSSでスライドの幅を指定する
2. SlickのオプションでvariableWidth: trueを設定する

これで、スライダーの幅を自由に指定できます。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。