纯JS图像轮播不是无限的，不会循环到第一个图像吗？

如何解决纯JS图像轮播不是无限的，不会循环到第一个图像吗？

所以我用javascript和一点点CSS创建了一个非常基本的图像滑块。我为不同的图像设置了相同的滑块。它似乎与那个完美配合。在第二个滑块中，我的图像比上一个更多，并且按向左和向右箭头按钮可在所有图像中滑动，但是一旦您获得了最后一个图像，这些图像就会显示为黑色，并且不会将滑块重新启动到自动生成第一张图片。这是我的代码-

HTML

 <div id="lookbook" data-tab-content class="black-text">
    <div class="lookbook-nav">
       <button id="left">←</button>
       <button id="right">→</button>
    </div>
    <div class="lookbook">
       <div class="slider">
          <img src="./BA/lookbook/17.jpg" id="lastClone" alt="">
          <img src="./BA/lookbook/01.jpg">
          <img src="./BA/lookbook/02.jpg">
          <img src="./BA/lookbook/03.jpg">
          <img src="./BA/lookbook/04.jpg">
          <img src="./BA/lookbook/05.jpg">
          <img src="./BA/lookbook/06.png">
          <img src="./BA/lookbook/07.png">
          <img src="./BA/lookbook/08.png">
          <img src="./BA/lookbook/09.png">
          <img src="./BA/lookbook/10.png">
          <img src="./BA/lookbook/11.png">
          <img src="./BA/lookbook/12.jpg">
          <img src="./BA/lookbook/13.jpg">
          <img src="./BA/lookbook/14.jpg">
          <img src="./BA/lookbook/15.jpg">
          <img src="./BA/lookbook/16.jpg">
          <img src="./BA/lookbook/17.jpg">
          <img src="./BA/lookbook/01.jpg" id="firstClone" alt="">
       </div>
    </div>
 </div>

CSS

#lookbook {
   width: 100vw;
   height: 100vh;
}



.lookbook-nav {
   width: 80vw;
   height: 10vh;
   margin-left: 10vw;
   margin-top: 40vh;
   position: absolute;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

button {
   border: none;
   outline: none;
   background: transparent;
   font-size: 2rem;
   /* font-weight: bold; */
   cursor: pointer;
}

button:hover {
   opacity: 0.4;
}

.lookbook {
   width: 56%;
   height: 88vh;
   margin: auto;
   overflow: hidden;
}

.lookbook img {
   width: 100%;
   height: auto;
}

.slider {
   margin-top: 10vh;
   display: flex;
   width: auto;
   height: 700px;
}

JS

const slider = document.querySelector('.slider');
const sliderImages = document.querySelectorAll('.slider img');

//  buttons

const leftbtn = document.querySelector('#left');
const rightbtn = document.querySelector('#right');

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

slider.style.transform = 'translateX(' + (-size * counter) + 'px)';

rightbtn.addEventListener('click',() => {
   if (counter >= sliderImages.length - 1) return;
   slider.style.transition = "transform 0.4s ease-in";
   counter++;
   slider.style.transform = 'translateX(' + (-size * counter) + 'px)'
})

leftbtn.addEventListener('click',() => {
   if (counter <= 0) return;
   slider.style.transition = "transform 0.4s ease-in";
   counter--;
   slider.style.transform = 'translateX(' + (-size * counter) + 'px)'
})

slider.addEventListener('transitionend',() => {
   if (sliderImages[counter].id === "lastClone") {
      slider.style.transition = "none";
      counter = sliderImages.length - 2;
      slider.style.transform = 'translateX(' + (-size * counter) + 'px)'
   }
   if (sliderImages[counter].id === "firstClone") {
      slider.style.transition = "none";
      counter = sliderImages.length - counter;
      slider.style.transform = 'translateX(' + (-size * counter) + 'px)'
   }
})