【Swiperスライダー】バラバラの画像サイズを上下中央に揃えて実装する方法
今回はSwiperスライダーを使って、バラバラの画像サイズを上下中央に揃える方法を紹介します。縦向きと横向きの画像を一緒にスライダーさせたいときなど、画像の横幅や高さが違う場合にオススメの実装方法です。
前提条件は以下
- jQueryは使わない
- Swiperは８系を使う
説明環境は以下
- macOS Monterey 12.5.1
- Visual Studio Code v1.73.1
※2023.01.12追記
Swiperのバージョンを８系に変更しました。
この記事の目次
Swiperを使ってバラバラの画像サイズを上下中央に揃えて表示させる方法
Swiperは8系を使用します。
Swiperを読み込む
今回はCDNで必要はファイルを読み込みます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>ダウンロードして読み込みたい方は公式サイトからどうぞ。
HTMLに書くこと
Swiperを動かすには以下のHTML構造とクラス名が必要になります。
<div class="swiper-container" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/demo01.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="./images/demo02.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="./images/demo03.jpg" alt="" />
</div>
</div>
<!-- 丸いページネーション -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- 左右のページ送り -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>Sassで書くこと
ポイントは以下の３つです。
- swiper-containerのheightにvwを使っている
- swiper-slideにflexboxを使って、上下左右を中央揃えにしている
- imgにはwidth: 100%;は使わない
.swiper-container {
position: relative;
overflow: hidden;
padding: 20px 0;
height: 40vw;
max-height: 600px; //最大の高さ
min-height: 400px; //最小の高さ
.swiper-slide {
text-align: center;
line-height: 1;
display: flex;
align-items: flex-start; //画像の高さを統一させない
justify-content: center; //左右の中央揃え
img {
display: inline; //念のため
width: auto; //念のため
max-width: 100%;
max-height: 100%;
align-self: center; //上下の中央揃え
}
}
.swiper-button-white {
&:focus {
outline: none;
}
}
.swiper-button-prev {
left: 25px;
}
.swiper-button-next {
right: 25px;
}
}JavaScriptで書くこと
init.jsなどファイルを作成してSwiperを動かす設定を書いていきます。
window.addEventListener('load', function(){
let mySwiper = new Swiper(".swiper-container", {
loop: true, //無限ループさせる
speed: 400, //移動するスピード
loopAdditionalSlides: 5, //スライダーを複製してループを滑らかにする
allowTouchMove: false,//マウスでのスワイプを禁止
pagination: { //円形のページネーションを有効にする
el: ".swiper-pagination",
clickable: true //クリックを有効にする
},
navigation: { //左右のページ送りを有効にする
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
});最後にinit.jsを読み込めば終わりです。
おわりに
今回はSwiperスライダーを使って、バラバラの画像サイズを上下中央に揃える方法を紹介しました。
縦向きと横向きの画像や、サイズが違う画像を一緒にスライダーできるのでギャラリー系と相性が良さようですね。
