Как сделать мой образ карусельной петлей

---

В настоящее время я пытаюсь Создать карусель изображений для веб-сайта, и у меня возникла проблема. Карусель не петляет, вместо этого, когда она достигает последнего изображения, она скользит назад к первому изображению, открывая изображения между ними. Я хочу, чтобы он вернулся к первому, не скользя полностью назад.

HTML:

<pre> ...<div class="carousel-container">
    
    
    <div class="carousel-slide">
        <img src="./img/testpic3.jpg" id="lastClone" alt="">
        <img src="./img/testpic1.jpg" alt="">
        <img src="./img/testpic2.jpg" alt="">
        <img src="./img/testpic3.jpg" alt="">
        <img src="./img/testpic1.jpg" id="firstClone" alt="">
    </div>
</div>

CSS

.carousel-container {
     width: 70%;
     max-height: 800px;
     margin: auto;
     margin-top: 1%;
     overflow: hidden;
     border: 5px solid white;
 }
 
 .carousel-slide {
     display: flex;
     width: 100%;
     height: 400px;
 }
 
 #prevBtn {
     position: absolute;
     top: 45%;
     z-index: 10;
     left: 20%;
     font-size: 50px;
     color: white;
     opacity: 0.5;
     cursor: pointer;
 }
 
 #nextBtn {
     position: absolute;
     top: 45%;
     z-index: 10;
     right: 20%;
     font-size: 50px;
     color: white;
     opacity: 0.5;
     cursor: pointer;
 }

язык JavaScript:

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');


const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');


let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';

var interval = 3000;
setInterval(function() {
    var offset = counter % (carouselImages.length - 2);
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    counter++;


    if (offset == 0) counter = 1; // to reset counter so next and prev button should work 

}, interval);

Что я уже пробовал:

Я попытался добавить идентификатор счетчика, который я абсолютно уверен, что это неправильно

var interval = 3000;
setInterval(function() {
    var offset = counter % (carouselImages.length - 2);
    carouselImages[counter].id === 'firstClone';
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    counter++;


    if (offset == 0) counter = 1; // to reset counter so next and prev button should work 

}, interval);

---