ECショップなどの商品詳細ページでよくみるタイプのスライダーです。
今回はslick sliderを使用して作ってみました。
実現したかったことは下記。
- サムネイル付き
- レスポンシブで1：1の比率固定
- バラバラな画像サイズに対応（見切れはOK）
１.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;
}
}画像では伝わりづらいですが、正方形のスライダーが完成。
２.サムネイルスライダーの実装
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;
// 今回はサムネイル５枚表示なので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;
}
}完成!!
画像では思ったより伝わりづらかった。。
