スライドショーにアニメーションを付与したい、settimeoutを解除したい

Question

javascriptでスライドショーを作成しているのですが解決できない問題点が２つあります。

実装しようとしているスライドショーの内容は以下です
・自動で画像が切り替わる
・次へ、前へボタンをクリックすると画像が切り替わる

1.画像が切り替わるときにフェードインさせて表示させたいのですがうまく切り替わりません。animateメソッドを使用し実装しようと考えています。画像は切り替わろうとしてくれるのですが最初の画像に戻ってしまします。animateメソッドを使用せず、styleを変更するだけなら上手く画像が切り替わってくれます。

2.自動で画像の切り替えをしたいのですがボタンを押したらsettimeoutをリセットしたいです
（例）5秒で自動的に画像が切り替わるが、３秒経ってからボタンを押し画像が切り替わった場合また５秒かけて次の画像を表示させたい。```ここに言語を入力
コード

      <ul class="slider_area" id="slider_area">
        <li><a href="#"><img src="img/slider/slider-0.png"></a></li>
        <li><a href="#"><img src="img/slider/slider-1.png"></a></li>
        <li><a href="#"><img src="img/slider/slider-2.png"></a></li>
        <li><a href="#"><img src="img/slider/slider-3.png"></a></li>
        <li><a href="#"><img src="img/slider/slider-4.png"></a></li>
        <li><a href="#"><img src="img/slider/slider-5.png"></a></li>
      </ul>

      <p class="fa-solid fa-angle-left prev" id="prev"></p>
      <p class="fa-solid fa-angle-right next" id="next"></p>
    </div>



```const prev = dom.getElementById('prev');
      const next = dom.getElementById('next');
      const imgs = dom.querySelectorAll('li > a > img');
      const mainImg = dom.getElementById('slider_area');
      let currentIndex = 0;

      function moveSlide() {
        const imgWidth = imgs[0].getBoundingClientRect().width;
        // mainImg.style.transform = `translateX(${-1 * imgWidth * currentIndex}px)`;
        mainImg.animate(
          [
            {transform: `translateX(${-1 * imgWidth * currentIndex}px)`}
          ],
          {
            duration: 500
          }
        );
      }

      function tggleArrow() {
        prev.classList.remove('hidden');
        next.classList.remove('hidden');

        if(currentIndex === 0) {
          prev.classList.add('hidden');
        }
        if(currentIndex === imgs.length - 1) {
          next.classList.add('hidden');
        }
      }

      function autoSlide() {
        setTimeout(() => {
          currentIndex++;
          if(currentIndex === imgs.length) {
            currentIndex = 0;
          }
          tggleArrow();
          moveSlide();
          autoSlide();
        }, 5000);
      }

      tggleArrow();
      autoSlide();

      prev.addEventListener('click', () => {
        currentIndex--;
        clearTimeout(autoSlide());
        tggleArrow();
        moveSlide();
      });

      next.addEventListener('click', () => {
        currentIndex++;
        tggleArrow();
        moveSlide();


```.slider {
  width: 80vw;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(-50%);
    width: 100vw;
    height: 4px;
    background-color: $mainColor;
  }

  .slider_area {
    max-width: 100%;
    max-width: 850px;
    display: flex;

    li {
      min-width: 100%;

      a {
        width: 100%;
        height: 100%;
  
        img {
          width: 100%;
        }
      }
    }
  }

  .prev {
    background-color: rgba(255,255,255,.7);
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    cursor: pointer;

    &::before {
      font-size: 32px;
    }

    &.hidden {
      display: none;
    }
  }

  .next {
    background-color: rgba(255,255,255,.7);
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;

    &::before {
      font-size: 32px;
    }

    &.hidden {
      display: none;
    }
  }
}