appendChild(), prepend()

let next =  document.querySelector('.next');
let prev =  document.querySelector('.prev');
let slider = document.querySelector('.slider');

function append(){
    let slides = document.querySelectorAll('.slides');
    slider.appendChild(slides[0]);
}

function prepend(){
    let slides = document.querySelectorAll('.slides');
    slider.prepend(slides[slides.length - 1]);
}

next.addEventListener('click', function(){
    append();
})
prev.addEventListener('click', function(){
    prepend();
})

setInterval(append, 3000);

.container{position: absolute; width: 100vw; height: 100vh; overflow: hidden;  display: flex; justify-content: center; align-items: center;}
.slider{position: absolute; inset: 80px 200px 80px 80px; }
.slider .slides{ position:absolute; width: 240px; height: 320px; background: var(--img); 
    background-position: center; background-size: cover;top: 50%;
    transform: translateY(-50%); border-radius: 20px; transition: 0.5s;}
.slider .slides:nth-child(1),
.slider .slides:nth-child(2) {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateY(0);
    background-size: cover;box-shadow: 0 25px 50px rgba(0,0,0,0);}
.slider .slides:nth-child(3){
    left: calc(50% + 240px); box-shadow: 0 25px 50px rgba(0,0,0,0.5);}
.slider .slides:nth-child(4){
    left: calc(50% + 500px); box-shadow: 0 25px 50px rgba(0,0,0,0.5);}
.slider .slides:nth-child(5){
    left: calc(50% + 760px); box-shadow: 0 25px 50px rgba(0,0,0,0.5);}
.slider .slides:nth-child(6){
    left: calc(50% + 1020px); box-shadow: 0 25px 50px rgba(0,0,0,0.5); opacity: 0;}

.buttons{position: absolute; bottom: 15px; display: flex; gap: 20px;}
.buttons span{position: relative; width: 50px; height: 50px; background: #111; cursor: pointer;
    display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.buttons span::before{content: ''; position: absolute; width: 15px; height: 15px; border-top:4px solid #fff; border-left: 4px solid #fff;
transform: rotate(315deg) translate(2px, 2px);}
.buttons span:nth-child(2)::before{transform: rotate(135deg) translate(2px, 2px);}
.content{position: absolute; bottom: 50px; left: 50px;font-size: 30px; background-color: #000;color: #fff; display: inline-flex;transition: 0.25s; transition-delay: 0s; z-index: 1000; opacity: 0;}
.slider .slides:nth-child(1) .content,
.slider .slides:nth-child(2) .content{opacity: 1;transition-delay: 0.5s; bottom: 80px;}

<div class="container">
    <div class="slider">
        <div class="slides" style="--img:url('../3d_lens/img/layer-1.jpg')">
            <div class="content">hahahaha</div>
        </div>
        <div class="slides" style="--img:url('img/2.jpg')">
            <div class="content">hoho</div>
        </div>
        <div class="slides" style="--img:url('img/3.jpg')">
            <div class="content">hahahaha</div>
        </div>
        ...
    </div>

    <div class="buttons">
        <span class="prev"></span>
        <span class="next"></span>
    </div>
</div>