Blog スタッフブログ

WEB制作の山田です。今回はslickを用いたスライダーレイアウトに関するお話です。

slickとはスライドショーをWEBサイトに表示することができるjQueryのプラグインです。

ページ内の限られた範囲で多数の画像をレイアウトすることができ、デザイン性・視認性の両面で重宝する表示方法です。

ただこのような表示方法の場合、下部で同時に表示する画像の枚数が多いとスマートフォンなど画面幅の狭いデバイスでページを表示した際に画像ごとのサイズがかなり小さくなってしまい、かえって視認性が悪化してしまいます。

ですので、slickでこのようなレイアウトを使用する際は

 responsive: [
      {
        breakpoint: 1200, // 768〜1199pxのサイズに適用
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 768, // 480〜767pxのサイズに適用
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 480, // 〜479px以下のサイズに適用
        settings: {
          slidesToShow: 2,
        },
      },
    ],

slidesToShowは同時に表示する画像の枚数を決めるslickのオプションです。

上記のコードをslickの記述内に書き加えることで、breakpointで指定した画面幅に応じて表示する画像の枚数を切り替えることができ、スマートフォン表示でも無理のないスライダーのレイアウトが可能になります。