Ползунок на JavaScript после нажатия на стрелку влево, если я вынимаю мышь или щелкаю на ползунке со стрелкой вправо, не работает

Question

Используя Учебник Youtube a создал слайдер JavaScript на моем сайте .В этом уроке vlogger создает только цикл вперед, не создавая обратной петли.

Согласно моей идее, слайдер работает с 4-секундным интервалом загрузки, когда у пользователя останавливается цикл наведения мыши.Пользователь может управлять ползунком, нажимая на стрелки влево и вправо, и, когда вынимает указатель мыши, ползунок должен возобновить скольжение вперед.

У меня проблема, когда пользователь нажимает на левую стрелку и убирает указатель мыши с ползункаперестает работать, и то же самое происходит, если пользователь после нажатия левой кнопки мыши нажимает стрелку вправо.Мне кажется, что после использования Loop2, обратный цикл, он не может вернуться к Loop, прямой цикл.Мой код здесь или

var bannerStatus = 1;
var bannerTimer = 4000;
 
// slider starts working on load
window.onload = function() {
    bannerLoop();  
    var startBannerLoop = setInterval(function() {
    bannerLoop();
    }, bannerTimer);
    // on mouse over loop stops
    document.getElementById("main-banner").onmouseover = function() {
        console.log("Inside onmouseover function")
        clearInterval(startBannerLoop);
    },
    // on mouse out it restarts sliding to the right
    document.getElementById("main-banner").onmouseout = function() {
        startBannerLoop = setInterval(function() {
    bannerLoop();
    }, bannerTimer);
    }
    // on click on the left arrow on the slider it slides back
    document.getElementById("imgbanbtn-prev").onclick = function() {
        console.log("Inside bannerLoop2 function")
        bannerLoop2();
    }
    // on click on the right arrow on the slider it slides forward
    document.getElementById("imgbanbtn-next").onclick = function() {
        bannerLoop();
    }
}
 
// first loop to slide pictures to the right
function bannerLoop() {
    if (bannerStatus === 1) {
        console.log("insideBannerLoop")
        document.getElementById("language").style.opacity="0";
        setTimeout(function() {
            document.getElementById("work").style.right="0px";
            document.getElementById("work").style.zIndex="4";
            document.getElementById("language").style.right="-350px";
            document.getElementById("language").style.zIndex="3";
            document.getElementById("yoga").style.right="350px";
            document.getElementById("yoga").style.zIndex="2";
            document.getElementById("travel").style.right="700px";
            document.getElementById("travel").style.zIndex="1";
        }, 500);
        setTimeout(function() {
            document.getElementById("language").style.opacity="1";
        }, 1000);
       
        bannerStatus = 2;
    }
    else if (bannerStatus === 2) {
        document.getElementById("yoga").style.opacity="0";
        setTimeout(function() {
            document.getElementById("language").style.right="0px";
            document.getElementById("language").style.zIndex="4";
            document.getElementById("yoga").style.right="-350px";
            document.getElementById("yoga").style.zIndex="3";
            document.getElementById("travel").style.right="350px";
            document.getElementById("travel").style.zIndex="2";
            document.getElementById("work").style.right="700px";
            document.getElementById("work").style.zIndex="1";
        }, 500);
        setTimeout(function() {
            document.getElementById("yoga").style.opacity="1";
        }, 1000);
       
        bannerStatus = 3;
    }
    else if (bannerStatus === 3) {
        document.getElementById("travel").style.opacity="0";
        setTimeout(function() {
            document.getElementById("yoga").style.right="0px";
            document.getElementById("yoga").style.zIndex="4";
            document.getElementById("travel").style.right="-350px";
            document.getElementById("travel").style.zIndex="3";
            document.getElementById("work").style.right="350px";
            document.getElementById("work").style.zIndex="2";
            document.getElementById("language").style.right="700px";
            document.getElementById("language").style.zIndex="1";
        }, 500);
        setTimeout(function() {
            document.getElementById("travel").style.opacity="1";
        }, 1000);
       
        bannerStatus = 4;
    }
    else if (bannerStatus === 4) {
        document.getElementById("work").style.opacity="0";
        setTimeout(function() {
            document.getElementById("travel").style.right="0px";
            document.getElementById("travel").style.zIndex="4";
            document.getElementById("work").style.right="-350px";
            document.getElementById("work").style.zIndex="3";
            document.getElementById("language").style.right="350px";
            document.getElementById("language").style.zIndex="2";
            document.getElementById("yoga").style.right="700px";
            document.getElementById("yoga").style.zIndex="1";
        }, 500);
        setTimeout(function() {
            document.getElementById("work").style.opacity="1";
        }, 1000);
       
        bannerStatus = 1;
    }
}
// second loop to slide pictures to the left       
function bannerLoop2() {
    if (bannerStatus === 1) {
        console.log("insideBannerLoop")
        document.getElementById("travel").style.opacity="0";
        setTimeout(function() {
            document.getElementById("work").style.left="0px";
            document.getElementById("work").style.zIndex="4";
            document.getElementById("travel").style.left="-350px";
            document.getElementById("travel").style.zIndex="3";
            document.getElementById("yoga").style.left="350px";
            document.getElementById("yoga").style.zIndex="2";
            document.getElementById("language").style.left="700px";
            document.getElementById("language").style.zIndex="1";
            }, 500);
            setTimeout(function() {
            document.getElementById("travel").style.opacity="1";
            }, 1000);
       
            bannerStatus = 2;
            }
        else if (bannerStatus === 2) {
            document.getElementById("yoga").style.opacity="0";
            setTimeout(function() {
                document.getElementById("travel").style.left="0px";
                document.getElementById("travel").style.zIndex="4";
                document.getElementById("yoga").style.left="-350px";
                document.getElementById("yoga").style.zIndex="3";
                document.getElementById("language").style.left="350px";
                document.getElementById("language").style.zIndex="2";
                document.getElementById("work").style.left="700px";
                document.getElementById("work").style.zIndex="1";
                }, 500);
                setTimeout(function() {
                document.getElementById("yoga").style.opacity="1";
                }, 1000);
       
                bannerStatus = 3;
            }
        else if (bannerStatus === 3) {
            document.getElementById("language").style.opacity="0";
                setTimeout(function() {
                document.getElementById("yoga").style.left="0px";
                document.getElementById("yoga").style.zIndex="4";
                document.getElementById("language").style.left="-350px";
                document.getElementById("language").style.zIndex="3";
                document.getElementById("work").style.left="350px";
                document.getElementById("work").style.zIndex="2";
                document.getElementById("travel").style.left="700px";
                document.getElementById("travel").style.zIndex="1";
                }, 500);
                setTimeout(function() {
                document.getElementById("language").style.opacity="1";
                }, 1000);
       
                bannerStatus = 4;
            }
        else if (bannerStatus === 4) {
            document.getElementById("work").style.opacity="0";
            setTimeout(function() {
                document.getElementById("language").style.left="0px";
                document.getElementById("language").style.zIndex="4";
                document.getElementById("work").style.left="-350px";
                document.getElementById("work").style.zIndex="3";
                document.getElementById("travel").style.left="350px";
                document.getElementById("travel").style.zIndex="2";
                document.getElementById("yoga").style.left="700px";
                document.getElementById("yoga").style.zIndex="1";
                }, 500);
                setTimeout(function() {
                document.getElementById("work").style.opacity="1";
                }, 1000);
                bannerStatus = 1;
            }
}