<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 class="myswiper-wrapper">
  <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>
</div>

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

/*
    カスタマイズ
    */
.myswiper-wrapper {
  /*ウィンドウ幅からはみ出さないようにする*/
  overflow: hidden;
}

.swiper {
  max-width: 640px;
  /*アクティブなスライド以外も見えるように*/
  overflow: visible !important;
}
.swiper-slide img {
  transition: 0.3s;
  opacity: 0.2;
}
.swiper-slide-active img {
  opacity: 1;
}

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

const swiper = new Swiper(".swiper", {
  loop: true,
  speed: 300,
  autoplay: {
    delay: 2000
  },
  //本来見えていない部分にスライドを複製する
  loopAdditionalSlides: 5
});