<div class="wrapper">

    <div class="arLeft">ЛЕВО</div>
    <div class="arRight">ПРАВО</div>

    <div class="tape">
        <div class="item">0</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</div>

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}   

.wrapper{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 250px auto;
    position: relative;
}

.tape{
    width: calc(200*4px);
    height: 100%;
    transition: all 0.5s;
}

.item{
    width: 200px;
    height: 200px;
    float: left;
}

.item:first-child{
    background: brown;
}

.item:nth-child(2){
    background: green;
}

.item:nth-child(3){
    background: yellow;
}

.item:last-child{
    background: purple;
}


.arLeft{
    width: 25px;
    height: 25px;
    position: absolute;
    top: -50px;
    left: 0px;
    background: red;
}
.arRight{
    width: 25px;
    height: 25px;
    position: absolute;
    top: -50px;
    right: 0px;
    background: red;
}

let tape = document.querySelector('.tape'),
    items = document.querySelectorAll('.item'),
    l = document.querySelector('.arLeft'),
    r = document.querySelector('.arRight'),
    stepForTape = 25,
    currentTranform = 0,
    stepForItems = 100*4,
    activeChild = 3,
    count = 0;


document.addEventListener('click', ()=>{console.log(`count : ${count} | activeChild : ${activeChild}`)});

l.addEventListener('click',()=>{
    if(count<3){
        count++;
        activeChild--;
        tape.style.transform = `translateX(${currentTranform-stepForTape}%)`;
        currentTranform-=stepForTape;       
        return;
    };
    if(count===3 && activeChild<4){
            if(activeChild===3){
                tape.children[activeChild].style.transform = `translateX(${stepForItems}%)`;
                tape.style.transform = `translateX(${currentTranform-stepForTape}%)`;
                currentTranform-=stepForTape;   
                stepForItems+=100*4;
                activeChild = 0;
                return;
            };
            tape.children[activeChild].style.transform = `translateX(${stepForItems}%)`;
            tape.style.transform = `translateX(${currentTranform-stepForTape}%)`;
            currentTranform-=stepForTape;   
            activeChild++;
    };
});


r.addEventListener('click',()=>{
        if(!activeChild){ 
            tape.children[activeChild].style.transform = `translateX(${-stepForItems}%)`;
            activeChild = 3
            stepForItems+=100*4
            tape.style.transform = `translateX(${currentTranform+stepForTape}%)`;
            currentTranform+=stepForTape;   
            return;
        };
        if(!count){
            tape.children[activeChild].style.transform = `translateX(${-stepForItems}%)`;
            tape.style.transform = `translateX(${currentTranform+stepForTape}%)`;
            currentTranform+=stepForTape;   
            activeChild--;
        };
});