<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">
      <div class="image">
        <img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=slide01" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="image">
        <img src="https://via.placeholder.com/640x360/dfb9e2/000000?text=slide02" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="image">
        <img src="https://via.placeholder.com/640x360/e2beb9/000000?text=slide03" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="image">
        <img src="https://via.placeholder.com/640x360/d4e2b9/000000?text=slide04" alt="">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="image">
        <img src="https://via.placeholder.com/640x360/b9e2cf/000000?text=slide05" alt="">
      </div>
    </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 {
  /*fedeアニメーションは必要ないため透過を無しにする*/
  opacity: 1 !important;
}

.swiper-slide .image,
.swiper-slide .image img {
  /*切り替わり中は前のスライドのアニメーションを遅らせる*/
  transition-delay: 0.5s;
}

.swiper-slide .image {
  transform: translateX(-100%);
  overflow: hidden;
}

.swiper-slide .image img {
  transform: translateX(100%);
}

.swiper-slide-active {
  /*アクティブなスライドが一番上に来るように*/
  z-index: 2;
}

.swiper-slide-active .image,
.swiper-slide-active .image img {
  transition-delay: 0s;
  transition-duration: 0.5s;
  transform: translateX(0%);
}

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

const swiper = new Swiper(".swiper", {
  //fadeを有効にすることでスライダーが全て重なり合った状態になる
  effect: "fade",
  loop: true,
  //fadeの切り替えは必要ないのでspeedは0s
  speed: 0,
  autoplay: {
    delay: 2000,
    //ドラッグで切り替えた後に自動再生が止まらないようにするにはfalse
    disableOnInteraction: false
  },
  //ドラッグで切り替えたくない場合はfalse
  allowTouchMove: false
});