夢みるゴリラ
夢みるゴリラ

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

headに書くこと

<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>

JavaScriptで書くこと

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"
    }
  });
});

CSSで書くこと

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

/*
背景画像のドット部分
-----------------------*/
.swiper-container:after{ 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
display: block;
background-color: rgba(0, 0, 0, 0.2);
background-image: radial-gradient(#000 20%, transparent 0), radial-gradient(#000 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 4px 4px;
background-repeat: repeat;
}
.swiper-slide {
display: flex;
align-items: flex-start;
justify-content: center;
}
.swiper-slide 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" style="background-image: url('./images/bg.jpg'); --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 swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>