SOURCE

let timer = null;
let current = 0;
let total = document.querySelectorAll('.sliders img').length;
let sliders = document.querySelector('.sliders .wrapper');
let prev = document.querySelector('button.prev');
let next = document.querySelector('button.next');

prev.addEventListener('click',function(){
    let size = prevSeq()*400;
    sliders.style.marginLeft='-'+size+'px';
});

next.addEventListener('click',function(){
    let size = nextSeq()*400;
    sliders.style.marginLeft='-'+size+'px';
});

function nextSeq(){
    if(current>=total){
        return current=0;
    }
    return ++current;
}

function prevSeq(){
    if(current<0){
        return current=total-1;
    }
    return --current;
}

<div class="sliders">
    <div class="wrapper">
        <div><img src="https://source.unsplash.com/collection/190727/400x300" alt=""></div>
        <div><img src="https://source.unsplash.com/collection/9248817/400x300" alt=""></div>
        <div><img src="https://source.unsplash.com/collection/1758353/400x300" alt=""></div>
        <div><img src="https://source.unsplash.com/collection/1856142/400x300" alt=""></div>
        <div><img src="https://source.unsplash.com/collection/446755/400x300" alt=""></div>
    </div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>

*{
    margin: 0px;
    padding: 0px;
}
.sliders{
    width: 400px;
    height: 300px;
    overflow: hidden;
}
.wrapper{
    display: flex;
    transition: .6s;
}