【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

中央固定の複数枚画像が並ぶカルーセルスライダーを作成したい。

このような悩みを解決します。

本記事ではスライダープラグインのslickを使って、中央固定の複数枚画像が並ぶカルーセルスライダーの作り方について解説します。

※事前にslickを使う上で、jqueryとslickプラグインをhead内に読ませましょう。

slick実行コード

        $(function () {
          $(".slider").slick({
            variableWidth: true,
            centerMode: true,
            focusOnSelect: true,
            responsive: [
              {
                breakpoint: 1000, //ブレイクポイントを指定
                settings: {
                  variableWidth: false,
                  centerMode: false,
                },
              },
            ],
          });
        });

上記は、画像左右チラ見せ中央固定カルーセルスライダーを作るサンプルコードです。

重要なのが以下プロパティです。

centermodeプロパティ
両端を見切れ状態（左右チラ見せ）にする事が出来ます。
左右チラ見せにするのでtrueに設定します。

variableWidthプロパティ
CSSで横幅を指定できるようになります。
中央固定にしたいのでtrueにします。

responsiveプロパティ
上記プロパティを使う事で、レスポンシブなサイトでデバイス幅事にプロパティを変更・追加できます。

本記事では、中央固定幅を下回ったらvariableWidthの設定をfasleにし、横幅を固定ではなく、自動可変に戻します。

その為、responsiveプロパティ内のbreakpointの値を中央固定幅の数値に設定し、variableWidth・centerModeをfalseに設定します。

以上でslick実行コードの設定は終わりです。

CSSで中央固定幅を設定

@media screen and (min-width: 1000px) {
    .slider-area {
      overflow: hidden;
     }
    .slick-slide {
      max-width: 1000px;
    width: 100% !important;
    }
    .slick-current {
      max-width: 1000px;
      width: 100% !important;
      margin: auto;
  }
}

上記CSSをスライダー要素にあてます。

メディアクエリを使って、前章で設定したbreakpoint値を設定。

同じく自動でスライダー要素に振り当てられるクラス.slick-slide、.slick-currentに以下プロパティを設定します。

max-width: breakpointで設定した数値;
width: 100% !important;

最後にスライダーを任意の親要素で囲み以下プロパティを設定します。

overflow: hidden;

variableWidthを設定しているとスライダーのはみ出た部分が現れ、横スクロール枠がでてしまいます。

overflow: hidden;で打ち消しましょう。

以上で画像左右チラ見せ中央固定カルーセルスライダーの完成です。

まとめ

以前swiperプラグインで左右チラ見せ中央固定カルーセルスライダーの作り方を紹介したのですが、slickでも実装できないかと思い、出来たので本記事で紹介しました。

以上で解説を終わります。

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

slick実行コード

CSSで中央固定幅を設定

まとめ

関連記事