Проблемы со слайдером, постоянно пропадает элемент

Через некоторое время пропадает первый элемент и вместо 5 остается 4. Куда пропадают элементы не могу понять, прошу помощи

js

let sub_elem = document.querySelector('.sub-sub-slider')
let slider = new Array (...sub_elem.children)
setInterval(() => {
   first = slider[0]
   slider[0] = slider[slider.length-1]
   slider[slider.length-1] = first
   sub_elem.firstChild.remove()
   sub_elem.appendChild(slider[0])
   slider.push(first)
   slider.shift()
}, 1500)

css

 .slider{max-width: 100%;margin: 0 auto;display: flex;overflow: hidden;}
.sub-slider{max-width: 100%;display: flex;align-items: center;overflow: hidden;}
.sub-sub-slider{max-width: 100%;display: flex;align-items: center;position: relative;}
.sub-sub-slider>img{max-height: 300px;}

html

         <div class="slider">
        <div class="sub-slider">
           <div class="sub-sub-slider">
              {{#each img}}
                 <img src="../{{this.path}}" alt="{{this.name}}">
              {{/each}}
           </div>
        </div>
     </div>