カルーセル Slick.js 小さなデバイスへの対応

Slick.jsとは、カルーセル（スライダー）を設置するプラグインです。[カルーセル Slick.js に文字を重ねる] で、画像文字を重ねた後の状態からの説明です。応用編として、小さなデバイスでもSlickスライダーの存在感を残す為のカスタマイズの例をご紹介します。ざっくり確認しましたが、デバイスによっては崩れるかもしれません。調整して下さい。

完成のイメージ

画像の設定

小さなデバイスでは、画像サイズが縦横の比率を保ったまま小さくなるので、インパクトに欠けると思うので全体の画像の中から一部を切り抜いた感じにしよと思います。

widthを自動にして、高さだけ指定しました。

object-fit: cover;で切り抜き、object-positionで切り抜く位置を調整します。100% 0%:右下、100% 100%:右下、0% 0%:左上、0% 100%:左下です。ちなみに、50%　50%は中央です。

@media (max-width: 575.98px) { 
  .slick-content{width: 80%;}
  .slick-image img{                 
    width:auto;                                     
    height:300px;  
    object-fit: cover;
    object-position:100% 0;
  }
}

.slick-content{width: 80%;}は何なのか、この後説明します。

小さな画面で、画像上にある左右の矢印が邪魔だなぁと思うので、消します。
先ほど書いた.jsに、レスポンシブの設定を追記します。

$(function() {
  $('.slick-image').slick({
     dots: true, 
     autoplay: true,
     autoplaySpeed: 3000,
     pauseOnHover: true, 
     responsive:[
      {
          breakpoint: 570,
          settings:{
          arrows: false,
          }
      },
  ]  
  });   
});

テキストの設定

矢印が消えたので、コンテンツの幅を広げようという事で先ほどの.slick-content{width: 80%;}を書きました。