【css】サムネイル付きの比率固定スライダーをつくる

0
141

ECショップなどの商品詳細ページでよくみるタイプのスライダーです。
今回はslick sliderを使用して作ってみました。
実現したかったことは下記。

  • サムネイル付き
  • レスポンシブで1:1の比率固定
  • バラバラな画像サイズに対応(見切れはOK)

1.mainのスライダーを実装

HTMLを記述します

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
    <!--  styleの読み込み  -->  
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
</head>
<body>
  <main>
    <!--  mainのスライダー  -->
    <div class="slider">
      <div class="slider-container">
        <div class="slider-main">
          <img src="https://picsum.photos/id/237/200/300" alt="">
          <img src="https://picsum.photos/id/238/200/200" alt="">
          <img src="https://picsum.photos/id/239/300/200" alt="">
          <img src="https://picsum.photos/id/240/400/500" alt="">
          <img src="https://picsum.photos/id/241/200/500" alt="">
          <img src="https://picsum.photos/id/242/300/300" alt="">
        </div>
      </div>
      <!--  サムネイルのスライダー  -->
      <div class="slider-nav-container">
        <div class="slider-nav"></div>
      </div>
    </div>
   </main>

<!--  sriptの読み込み  -->  
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

</body>
</html>

まだスライダーは動いておらず、画像が画面に表示されている状態です。

jsを記述してスライダーを動作させます。

 $('.slider-main').slick({
  slidesToShow: 1,
  slidesToScroll:1,
  autoplay: true,
  autoplaySpeed: 3000,
  dots:false,
  arrows: false,
});

この時点でのオプションは適当ですが、スライダーとして動作してくれます。簡単で良いです。。。。

スライダーにスタイルをかけていきます。
ポイントは下記の通り。

  • sliderを包むslider-containerにpadding-topで1:1の比率固定し、overflow:hidden
  • *よくみるYouTubeの比率固定と同じ方法です。
  • slider-main配下全ての要素にwidth:100%,height100%を指定
    *スライド表示領域が余らないように画像が伸びてくれます。
  • imgにobject-fit:coverを指定
    *画像の比率を維持したまま伸びてくれます。
.slider{
    width: 50%;
    margin: 60px auto;
    &-container{
        width: 100%;
        overflow: hidden;
        padding-top: 100%; //1:1にしたいので100%
        position: relative;
    }
    &-main{
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;
    }
    &-main *{  //slider-main配下すべてに
        width: 100%;
        height: 100%;
    }
    img{
        // background-size: coverと同じ効果
        object-fit: cover;
    }
}

画像では伝わりづらいですが、正方形のスライダーが完成。

2.サムネイルスライダーの実装

HTMLにサムネイル用の画像を追加

      <!--  サムネイルのスライダー  -->
      <div class="slider-nav-container">
        <div class="slider-nav">
            <img src="https://picsum.photos/id/237/200/300" alt="">
            <img src="https://picsum.photos/id/238/200/200" alt="">
            <img src="https://picsum.photos/id/239/300/200" alt="">
            <img src="https://picsum.photos/id/240/400/500" alt="">
            <img src="https://picsum.photos/id/241/200/500" alt="">
            <img src="https://picsum.photos/id/242/300/300" alt="">  
        </div>
      </div>

Jsにナビ用の設定を追加

 $('.slider-main').slick({
  slidesToShow: 1,
  slidesToScroll:1,
  autoplay: true,
  autoplaySpeed: 3000,
  dots:false,
  arrows: false,
  // navのスライダーとリンクさせる
  asNavFor:'.slider-nav',
});
$('.slider-nav').slick({
  // mainのスライダーとリンクさせる
  asNavFor:'.slider-main',
  focusOnSelect: true,
  slidesToShow:5,
  slidesToScroll:1,
  arrows:false,
});

サムネイルのnavスライダーが動きます。

こちらのスライダーも同じように比率固定
Padding-topの比率だけ変更します

.slider-nav-container{
    width: 100%;
    overflow: hidden;
    // 今回はサムネイル5枚表示なのでpadding-topは20%
    padding-top: 20%;
    position: relative;
    .slider-nav{
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .slider-nav *{
        width: 100%;
        height: 100%;
    }
    img{
        object-fit: cover;
    }
}

完成!!

画像では思ったより伝わりづらかった。。