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

<div id="timer">
  0
</div>
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=slide01" alt=""></div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/dfb9e2/000000?text=slide02" alt=""></div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/e2beb9/000000?text=slide03" alt=""></div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/d4e2b9/000000?text=slide04" alt=""></div>
    <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/b9e2cf/000000?text=slide05" alt=""></div>
  </div>
</div>

body {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

#timer {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

/*
    カスタマイズ
    */
.swiper-slide img {
  transform: scale(1);
  /*スワイパーの切り替え速度と自動再生の停止時間を合計した秒数に設定する*/
  transition: 7s;
}

.swiper-slide-active img {
  transform: scale(2);
}

const timer = document.getElementById("timer");
setInterval(function () {
  timer.innerText = Number(timer.innerText) + 1;
}, 1000);

const swiper = new Swiper(".swiper", {
  effect: "fade",
  fadeEffect: {
    crossFade: true
  },
  loop: true,
  speed: 2000,
  autoplay: {
    delay: 5000,
    //ドラッグで切り替えた後に自動再生が止まらないようにするにはfalse
    disableOnInteraction: false
  },
  //ドラッグで切り替えたくない場合はfalse
  allowTouchMove: false,
  on: {
    /*
        初回読み込み時に切り替えの時間が含まれていないため、cssで設定したアニメーションのタイミングがずれる
        したがってspeedで設定した秒数分自動再生が始まる時間を遅らせる
        */
    afterInit: function (swiper) {
      swiper.autoplay.stop();
      setTimeout(function () {
        swiper.autoplay.start();
      }, 2000);
    }
  }
});