Javascript-форум - Помогите придумать логику к движению в правую сторону.

Бесконечное движение слайдов с разной шириной я сделал, но возникли проблемы как сделать тоже самое на другую сторону с привязкой к шагу. Что-то делаю и сразу натыкаюсь на проблемы, которые не могу решить.
Помогите хотя бы чисто теоретически что надо сделать, если нет времени исправлять.
Предупреждаю мой код является не оптимизированным.
Мне нужно решить проблему, а тогда я сам этим займусь.:help:

let init = () => {
    btnLeft = document.getElementById('btnLeft');
    btnRight = document.getElementById('btnRight');
    slides = document.querySelectorAll('.slide');
    slider = document.querySelector('.slider');
    sliderWidth = document.querySelector('.slider').clientWidth;
    step = 0;
    step_2 = 0;
    step_move = 0;
    offset = 0;
    elemsDraw = []; //array of widths for draw
    elemsDraw_2 = []; //array of widths for draw
    newArrRep = [];
    screenElems = [];
    arrWidths = []; // array of width for move
    arrWidths_2 = []; // array of width for move
 
    let moveLeft = () => {
        elems = document.querySelectorAll('.slide');
        let fillGap = () => {
            elems = document.querySelectorAll('.slide');
            let sum = 0;
            for (let i = 0; i < elems.length; i++) {
                sum += elems[i].clientWidth;
            }
            sum -= elems[0].clientWidth;
 
            if (sum < sliderWidth) {
                drawRight();
                fillGap();
                elems = document.querySelectorAll('.slide');
            } else {
                elems = document.querySelectorAll('.slide');
                return;
            }
        }
        fillGap();
        if (step_move > slides.length - 1) { step_move = 0 };
 
        for (let i = 0; i < elems.length; i++) {
            current_position = elems[i].offsetLeft;
            elems[i].style.left = current_position - elems[step_move].clientWidth + 'px';
 
        }
        newArrRep.push(elems[step_move].clientWidth);
 
        setTimeout(() => {
            elems[0].remove();
            step_move--;
        }, 1000);
 
        step_move++;
    }
 
    let drawRight = () => {
        let gapRight = 0;
        if (document.querySelectorAll('.slide')) {
            [...elemsDraw].forEach((elem) => {
                gapRight += elem;
            });
        }
 
        if (step > slides.length - 1) { step = 0 };
 
        let repairReal = 0;
        for (let i = 0; i < newArrRep.length; i++) {
            repairReal += newArrRep[i];
        }
        slides[step].style.left = (gapRight - repairReal) + "px";
        slider.append(slides[step]);
        arrWidths.push(slides[step].clientWidth);
        let widthPush = slides[step].clientWidth;
        elemsDraw.push(widthPush);
        step++;
    }
 
    let checkingGap = () => {
        let elems = document.querySelectorAll('.slide');
        let allWidth = 0;
        elems.forEach((element) => {
            allWidth += element.clientWidth;
        });
        if (allWidth < sliderWidth) {
            drawRight();
            checkingGap();
        } else {
            return;
        }
    };
 
    let actionLeft = () => {
        drawRight();
        checkingGap();
        moveLeft();
    }
  
 
    let main = (() => {
        slides.forEach((element) => {
            element.remove();
        });
        checkingGap();
 
        btnLeft.onclick = () => {
            actionLeft();
        }
        btnRight.onclick = () => {
           
        }
 
    })();
}//end of init
window.addEventListener('load', init, false);

<body>
    <div class="slider">
            <div class="slide w168px"></div>
            <div class="slide w250px"></div>
            <div class="slide w80px"></div>
            <div class="slide w280px"></div>
            <div class="slide w150px"></div>
            <div class="slide w52px"></div>
    </div>
 
    <div class="buttons">
        <button id="btnLeft">Left</button>
        <button id="btnRight">Right</button>
    </div>
   
    <script src="script.js"></script>
</body>

Код:

*{

    margin:0px;

    padding:0px;

}

.bs{

    border:2px solid rgb(81, 243, 17);

}

.buttons{

    width:200px;

    margin:0px auto;

    display: flex;

    flex-flow: row wrap;

}

.buttons button{

    width:50%;

    padding:20px;

}

.slider{

    width:300px;

    height:300px;

    border:4px solid grey;

    margin:100px auto;

    position: relative;

}

.slide{

    transition:all 1s ease-in-out 0s;

}

.w168px{

  

    width:168px;

    height:300px;

    background-color: rgb(231, 84, 84);

    position: absolute;

    top:0px;

    left:0px;

}

.w250px{

    width:250px;

    height:300px;

    background-color: rgb(38, 129, 214);

    position: absolute;

    top:0px;

    left:0px;

}

.w80px{

   

    width:80px;

    height:300px;

    background-color: seagreen;

    position: absolute;

    top:0px;

    left:0px;

}

.w280px{

 

    width:280px;

    height:300px;

    background-color: rgb(48, 93, 197);

    position: absolute;

    top:0px;

    left:0px;

}

.w150px{

  

    width:150px;

    /* width:20px; */

    height:300px;

    background-color: rgb(235, 216, 40);

    position: absolute;

    top:0px;

    left:0px;

}

.w52px{

   

    width:52px;

    height:300px;

    background-color:rgb(255, 129, 150);

    position: absolute;

    top:0px;

    left:0px;

}