【Swiperスライダー】バラバラの画像サイズを上下中央に揃えて実装する方法
今回はSwiperスライダーを使って、バラバラの画像サイズを上下中央に揃える方法を紹介します。縦向きと横向きの画像を一緒にスライダーさせたいときなど、画像の横幅や高さが違う場合にオススメの実装方法です。
前提条件は以下
- Swiperは4系を使う（IE対策）
- jQueryは使わない
説明する環境は以下
- macOS Catalina v10.15.5
- Visual Studio Code v1.46.1
Swiperを使ってバラバラの画像サイズを上下中央に揃えて表示させる方法
SwiperはIE対応のために4系を使います。5系、６系を使う方はJavaScriptの書き方が変わってる可能性があるので注意しましょう。
Swiperを読み込む
CDNが用意されているので以下のようにSwiperを読み込みます。単体で動くのでjQuery本体を読み込む必要はありません。
<!-- swiper専用css-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"/>
<!-- swiper.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>ダウンロードして読み込みたい方は公式サイトからどうぞ。
HTMLに書くこと
Swiperを動かすには、以下のHTML構造とクラス名が必要になります。個人的に設定したクラス名はjs-swiper-01のみです。
<div class="swiper-container">
<div class="swiper-wrapper js-swiper-01">
<!-- 画像１ -->
<div class="swiper-slide">
<img src="./images/swiper-img01.jpg" alt="" />
</div>
<!-- 画像２ -->
<div class="swiper-slide">
<img src="./images/swiper-img02.jpg" alt="" />
</div>
<!-- 画像３ -->
<div class="swiper-slide">
<img src="./images/swiper-img03.jpg" alt="" />
</div>
</div>
<!-- 左右のページ送り -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></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を動かす設定を書いていきます。
if (document.querySelector(".js-swiper-01")) { //クラス名js-swiper-01があれば作動させる
var mySwiper = new Swiper(".js-swiper-01", {
loop: true, //無限ループさせる
speed: 400, //移動するスピード
loopAdditionalSlides: 5, //スライダーを複製してループを滑らかにする
navigation: { //ページネーションの有効化
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
allowTouchMove: false, //スライプの禁止、クリックでの移動を禁止する
slidesPerView: 1, //見せる枚数
});
}最後にinit.jsを読み込めば終わりです。
おわりに
今回はSwiperスライダーを使って、バラバラの画像サイズを上下中央に揃える方法を紹介しました。
縦向きと横向きの画像や、サイズが違う画像を一緒にスライダーできるのでギャラリー系と相性が良さようですね。
