Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用していますSWELLについて

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

slick

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

INDEX

完成のイメージ

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%;}を書きました。

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX