Web制作 slick スライダー

【slick】レスポンシブ対応!ブレイクポイントでスライドの表示枚数を変える方法

slickでスライドの表示枚数をブレイクポイントで変更出来ない?

PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。

それにはslickのオプションを使ってブレイクポイントを指定すれば、スライドの表示枚数を変えることが出来ます(ブレイクポイントは複数指定できます)

今回はコピペ可能なコードとデモを使って解説していきます。

slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

参考記事
レスポンシブ対応のスライダープラグイン slickの使い方
レスポンシブ対応のスライダープラグイン slickの使い方

続きを見る

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

参考記事
【slick】カスタマイズ用オプションまとめ一覧
【slick】カスタマイズ用オプションまとめ一覧

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


レスポンシブ対応のslickを使ってブレイクポイントでスライドの表示枚数を変える方法

slickのオプションでブレイクポイントを指定する事が出来ますが、そのブレイクポイントで設定出来るのは枚数だけではありません。

まずはスライドの表示枚数を変更する方法、次にスライドをフェードに変えてみたいと思います。

 

スライドの表示枚数をPCでは3枚、指定したブレイクポイントで1枚に変更

まずは完成形を見てみます。

See the Pen
slick(レスポンシブ)
by junpei (@junpei-sugiyama)
on CodePen.

パソコンの場合は画面幅を狭くするか、左上のHTMLやCSSをクリックすれば3枚から1枚になるのが確認出来ると思います。

 

コード解説

HTMLとCSSは特に変わった点はないので省略します。

jQueryはこのようになっています。

$(function () {
  $(".slider").slick({
    arrows: false,
    autoplay: true,
    adaptiveHeight: true,
    dots: true,
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 400, // 399px以下のサイズに適用
        settings: {
        slidesToShow: 1,
        },
      },
    ],
  });
});

ポイントとなるのは2か所です。

slideToShow表示するスライド数(初期値:1)
responsiveレスポンシブのブレイクポイントを設定してオプションを切り替える(初期値:none)

slideToShowは2か所にありますが、最初の3と設定しているのが基本となる表示枚数。

そしてresponsive内のsettingsにある方が設定したbreakpointより小さくなった時の表示枚数です。

 

ブレイクポイントは複数設定可能

先ほど設定したブレイクポイントは1ヵ所でしたが、以下のように複数設定することも可能です。

$(function () {
  $(".slider").slick({
    slidesToShow: 4,
    responsive: [
      {
        breakpoint: 1024, // 768〜1023px以下のサイズに適用
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 768, // 480〜767px以下のサイズに適用
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 480, // 〜479px以下のサイズに適用
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  });
});

 

表示枚数以外も変更可能

先ほどのコードを必要な箇所だけ切り取って見てみます。

$(function () {
  $(".slider").slick({
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 400, // 399px以下のサイズに適用
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  });
});

このsettingsの中に変更したいオプションを追記可能です。

変えられるのは表示枚数だけではないって事ですね。

試しに表示枚数だけでなく、スライドの種類をフェードになるように変更してみます。

するとこのようになります。

$(function () {
  $(".slider").slick({
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 400, // 399px以下のサイズに適用
        settings: {
          fade: true,
          slidesToShow: 1,
        },
      },
    ],
  });
});

こちらが完成形です、またHTMLやCSSをクリックしてスライドを1枚にすればフェードの確認が可能です。

See the Pen
slick(レスポンシブ:フェード切り替え)
by junpei (@junpei-sugiyama)
on CodePen.

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, slick, スライダー