How can I add infinity loop on my carousel?

Question

I'm trying to make a carousel with images and fast animation during transition. But I'm stuck with my problem, probably it's a basic problem but I'm new to JS. I need to make an infinite loop on my carousel. I want to make it so that it always spins clockwise. It must always rotate clockwise without returning to index 0 and rotating again, because that's what I was able to create before.

How can I achieve this?

Thank you in advance for your help!

document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.querySelector('.carouselm');
  let slides = Array.from(document.querySelectorAll('.slide'));
  const slideWidth = slides[0].offsetWidth;
  const centerOffset = (carousel.offsetWidth - slideWidth) / 2;
  let currentCenterIndex = 2;
  let intervalId;
  function goToSlide(index) {
    const slideOffset = centerOffset - slideWidth * index;
    carousel.style.transform = `translateX(${slideOffset}px)`;
    currentCenterIndex = index;
    slides.forEach((slide, i) => {
      slide.classList.toggle('color-slide', i === currentCenterIndex);
    });
  }

  goToSlide(currentCenterIndex);

  function nextSlide() {
    if (currentCenterIndex < slides.length - 3) {
      goToSlide(currentCenterIndex + 1);
    } else {
      const firstSlide = slides.shift();
      slides.push(firstSlide);
      currentCenterIndex = slides.length - 3;
      goToSlide(currentCenterIndex);
    }
   
  }

  function startCarousel() {
    intervalId = setInterval(nextSlide, 600);
  }

  function stopCarousel() {
    clearInterval(intervalId);
  }

  startCarousel();

  carousel.addEventListener('mouseenter', stopCarousel);
  carousel.addEventListener('mouseleave', startCarousel);


});

.carousel-container {
    overflow: hidden;
    position: relative;
  }

.carouselm {
    display: flex;
    transition: transform 0.5s ease-in-out; 
}

.slide img {
    width: 384px;
    height: 305px;
    filter: grayscale(1);
    transition: scale 1.4s;
    scale: .7;
}

.color-slide img {
    filter: grayscale(0);
    scale: .9;
    opacity: 1;
}

<div class='carousel-container'>
    <div class='carouselm'>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
    </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
    </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt='piekarnia-cukiernia'>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>