Swiperのスライダーで画像の高さが違う場合、スライドの高さを自動で調整することも可能ですが、そうするとスライダーの下にあるコンテンツも上下に動いてしまいます。
スライダーに関してもかなり動きまくってしまうので、今回はスライドを上下中央にする方法を解説します。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
【Swiper】カスタマイズ用オプションまとめ一覧
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
Swiperで高さがバラバラのスライドを上下中央にする方法
まずは基本となるスライダーを見てみます(パソコンの場合は左上のHTML・CSS・JSをクリックすると分かりやすいです)
See the Pen
Swiper:高さがバラバラ(未調整) by junpei (@junpei-sugiyama)
on CodePen.
前後の矢印の位置は一番高いスライドの上下中央になっていて、スライドが変わって高さが変わっても位置は変わりません。
これを自動で全てのスライドの上下中央に矢印が来るようにしたのがこちら(パソコンの場合は左上のHTML・CSS・JSをクリックすると分かりやすいです)
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
スライドの高さが変わると矢印の位置も変わります。
ただこれでは下にあるコンテンツも上下に動いてしまうので、以下のようにスライドを上下中央になるようにしたいと思います。
See the Pen
Swiper:高さがバラバラのスライドを上下中央にする by junpei (@junpei-sugiyama)
on CodePen.
それではコードの解説をしていきます。
コード解説
JavaScriptは特に変わったところはなく、重要なのはCSSだけですがHTMLも載せます。
HTML
HTMLは特に変わったところはなく、通常通りの書き方でOKです(ページネーションと矢印はなくてもOK)
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="画像パス1"
alt=""
/>
</div>
<div class="swiper-slide">
<img
src="画像パス2"
alt=""
/>
</div>
<div class="swiper-slide">
<img
src="画像パス3"
alt=""
/>
</div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- 前後の矢印 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
注意点としては、class名は決められているものなので変更しないようにしましょう。
CSS
そして重要なのがCSSになります。
.swiper {
height: 40vw;
max-height: 600px; /* 最大の高さ */
min-height: 400px; /* 最小の高さ */
}
.swiper-slide {
display: flex;
justify-content: center; /* 左右の中央揃え */
}
.swiper-slide img {
align-self: center; /* 上下の中央揃え */
max-height: 100%;
max-width: 100%;
width: auto;
}
スライダー全体の高さは調整可能ですが、align-self: center;
はないと画像が潰れてしまうので注意しましょう。
上下左右を中央揃えにするのはdisplay: flex;
を使っています。
まとめ:Swiperで高さがバラバラのスライドを上下中央にするには『display: flex;』を使う
今回はSwiperの高さがバラバラのスライドを上下中央にする方法について解説しました。
なるべくなら画像のサイズは揃えた方がいいですが、縦写真と横写真など画角を揃えるのが難しいフォトギャラリーなどで重宝するかと思います。
以上になります。
【Swiper】高さがバラバラのスライドで高さを自動調整する方法
続きを見る
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧