バラバラの画像サイズを
上下中央に揃えて実装するデモページ

head

                               
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
                               
                           

js

                               
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, //pcではスライプの禁止、クリックでの移動を禁止する
slidesPerView: 1, //見せる枚数
});
}
                               
                           

Sass

                               
.swiper-container {
position: relative;
overflow: hidden;
height: 40vw;
padding: 20px 0;
max-height: 600px;
min-height: 400px;

.swiper-slide {
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;
}
}
                               
                           

HTML

                           
<div class="swiper-container js-swiper-01">
<div class="swiper-wrapper">
<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>