【Swiper.js】縦横比を保ったまま横幅いっぱいのスライダーをつくる

Swiper.jsという、jQueryなしで動く高機能なライブラリがあります。

このライブラリで縦横比を保ったままウインドウ幅いっぱい + レシスポンシブ対応のスライドをつくる方法のメモ。

HTML・JavaScript

このサンプルではスライドの中に画像を配置したものを考えます。

1
2
3
4
5
6
7
8
9
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="sample1.jpg"></div>
<div class="swiper-slide"><img src="sample2.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
var mySwiper = new Swiper ('.swiper-container', {
loop: true,

pagination: {
el: '.swiper-pagination',
},

navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})

HTML・JavaScriptに関しては特別な設定はしておらず、デフォルトのままです。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.swiper-container {
position: relative; /* デフォルトCSSに含まれています */
}

.swiper-container:before {
content: "";
display: block;
padding-top: calc(9/16*100%); /* 縦/横*100の値を書く */
}

.swiper-wrapper {
position: absolute; /* ← デフォルトCSSと優先順位が干渉するときは工夫してください */
top: 0;
left: 0;
}

.swiper-wrapper img {
width: 100%;
height: auto;
}

上記のCSSを新たに追加します。

巷ではそこそこ有名な方法です。margin/paddingの割合指定はは要素の幅が基準になることを利用して、疑似要素にpadding-topを付しています。

padding-topの値は計算機で「縦/横*100」を割り出しても良いですが、大抵はきれいな値にならないので、calc()を使って導出しています。

そして、そのままだと疑似要素による謎のスペースが占拠してしまうので、残りの子要素を親要素の左上へ絶対配置します。