【簡単】slickのセンターモードのやり方【左右チラ見せ】

2023年6月12日2023年6月19日

記事内に広告を含みます

パソ君

・slickのセンターモードのやり方は？

こんな疑問にお答えします。

slickでスライダーを実装するとき、中央配置にして左右が少しだけチラ見えしてるの作りたいときありますよね。

あれ実は簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「slickのセンターモードのやり方」について解説していきます！

この記事でわかること

slickのセンターモードのやり方

2023年1月24日【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【簡単】slickのセンターモードのやり方【左右チラ見せ】
- ➀：「centerMode」を「true」にする
- ➁：「centerPadding」にてチラ見せ幅を設定
【簡単】slickのセンターモードのやり方【枚数を変える】
【簡単】slickのセンターモードのやり方【左右チラ見せ】：まとめ

【簡単】slickのセンターモードのやり方【左右チラ見せ】

そんな中央配置にして左右チラ見せしてるサンプルがこちら↓

See the Pen slick縦➀ by jito-coder (@jito-coder) on CodePen.

$(function () {
    $(".test-slick").slick({
        arrows: false,
        autoplay: true,
        centerMode: true,
        centerPadding: "15%",
        dots: true,
    });
});

コードの重要な点がこちら↓

「centerMode」を「true」にする
「centerPadding」にてチラ見せ幅を設定

順に見ていきましょう。

➀：「centerMode」を「true」にする

まずslickのオプション「centerMode」を「true」に設定します。

$(function () {
    $(".test-slick").slick({
        // ~~~
        centerMode: true,
        // ~~~
    });
});

これでスライドを中央配置にすることができます。

そして前後のスライド要素を、チラ見せすることが可能に。

➁：「centerPadding」にてチラ見せ幅を設定

あとはチラ見せする横幅を設定すればOK。

やり方は「centerPadding」の値に記述するだけです。

今回は例として20％を記述しました↓

$(function () {
    $(".test-slick").slick({
        // ~~~
        centerMode: true,
        centerPadding: "20%",
        // ~~~
    });
});

ジト

これで中央配置、かつチラ見せすることができるよ！

「centerPadding」の説明

・初期値は50px。
・値は「px」もしくは「%」で指定可能。

【簡単】slickのセンターモードのやり方【枚数を変える】

先ほどは中央に1枚のサンプルでした。

ただ複数枚の中央配置も可能です。

サンプルとして3枚のスライドを中央にしました↓

See the Pen slickセンターモード➀ by jito-coder (@jito-coder) on CodePen.

「slidesToShow」の値を変えれば実装できます。

またそれに合わして「centerPadding」の値も変更しましょう。

$(function () {
    $(".test-slick").slick({
        arrows: false,
        autoplay: true,
        centerMode: true,
        centerPadding: "5%",
        slidesToShow: 3,
        dots: true,
    });
});