パイタイマーのループ処理方法

下記URLのファーストビュー右にあるタイマーのループ実装を行いと思っています。
2週間ほど悩んでおりどうしてもわからないため質問させていただきました。

https://www.odakyu.jp/feelfreetrip/

参考サイトのjsが複雑で理解できないため自分で実装を試みましたがどうしてもうまくいきません。

現状、タイマーの作成はできたのですが、サイトのようなループの動きがうまくいっていない状態です。
どなたかお力添えいただけますと幸いです。

下記現状のコードになります。
jsの知識があまりないため、コードが読みにくいかもしれませんが何卒よろしくお願いいたします。

html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="item">
    <div class="dot"></div>
    <svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">
      <g>
        <circle id="circle" class="timer-circle" r="14.5" cy="16.5" cx="16.5" stroke-width="1" stroke="#008b8b"
          fill="none" />
        <circle id="circle" class="bg" r="14.5" cy="16.5" cx="16.5" stroke-width="1" stroke="#a9a9a9" fill="none" />
      </g>
    </svg>
  </div>
  <div class="item">
    <div class="dot"></div>
    <svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">
      <g>
        <circle id="circle" class="timer-circle circle1" r="14.5" cy="16.5" cx="16.5" stroke-width="1" stroke="#008b8b"
          fill="none" />
        <circle id="circle" class="bg" r="14.5" cy="16.5" cx="16.5" stroke-width="1" stroke="#a9a9a9" fill="none" />
      </g>
    </svg>
  </div>
  <div class="item">
    <div class="dot"></div>
    <svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">
      <g>
        <circle id="circle" class="timer-circle" r="14.5" cy="16.5" cx="16.5" stroke-width="1" stroke="#008b8b"
          fill="none" />
        <circle id="circle" class="bg" r="14.5" cy="16.5" cx="16.5" stroke-width="1" stroke="#a9a9a9" fill="none" />
      </g>
    </svg>
  </div>
  <div class="tp--hd__counts js-mv-cts"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

CSS
/*  タイマーの表示場所指定   */
.item {
  position: relative;
  float: left;
  width: 33px;
  height: 33px;
}

.timer-time {
  text-align:center;
  position: absolute;
  line-height: 4em;
  width: 100%;
  font-size:2.5em;
}

svg {
  -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

.timer-circle {
  stroke-dasharray: 0px, 9999px;
  stroke-dashoffset: 91;
  stroke-opacity:0.3;
  transition: all 1s linear;

}

.bg {
  opacity: .1;
}

.dot {
  width: 4px;
  height: 4px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #a9a9a9;
}

JavaScript
// タイマーの表示、非表示・is-acクラスの付与と削除
window.addEventListener('load', function () {
  viewSlide('.timer-circle');
});

function viewSlide(className, slideNo = -1) {
  let imgArray = document.querySelectorAll(className);
  if (slideNo >= 0) {
    imgArray[slideNo].classList.remove('is-ac');
    $('.timer-circle').css('stroke-dashoffset', -91);
    $('.timer-circle').css({'stroke-dasharray':'0px 101px'});
  }
  slideNo++;
  if (slideNo >= imgArray.length) {
    slideNo = 0;
  }
  imgArray[slideNo].classList.add('is-ac');
  setTimeout(function () {
    viewSlide(className, slideNo);
  }, 6000);
}

// is-acが付与された時のタイマーの動き
let time = 5;
let initialOffset = '91';
let i = 0;

let interval = setInterval(function () {
  $('.is-ac').css('stroke-dashoffset', initialOffset - (i * (initialOffset / time)));
  $('.is-ac').css({'stroke-dasharray':'91px 101px'});

  if (i == time) {
    i = -1
  }
  i++;
}, 1000);