JS now its working automate, but i want to create to buttons left and right and slide it on click

This is HTML

<div id="bcg">
            <img id="slider" src="img/backgrounds/bg.jpg" alt="">
            <img id="slider" src="img/backgrounds/bg-1.jpg" alt="">
            <img id="slider" src="img/backgrounds/bg-2.jpg" alt="">
            <img id="slider" src="img/backgrounds/bg.jpg">
</div>>

This is CSS

#bcg {
width: 100%;
height: 100%;
display: flex;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
 }

#bcg img {
width: 100%;
height: 100%;
}

/// This is JavaScript, i want to work on click//

 var imgArray = [
     "https://www.ncesc.com/wp-content/uploads/2021/07/business-development-manager-job- 
description.png",
    "https://www.compuvis.com/images/site/slider/download.jpg",
    'https://koinworks.com/wp-content/uploads/2021/04/bisnis-proposal.jpg'],
    curIndex = 0;
imgDuration = 3000;

function slideShow() {
    document.getElementById('slider').className += "fadeOut";
    setTimeout(function () {
        document.getElementById('slider').src = imgArray[curIndex];
        document.getElementById('slider').className = "";
    }, 1000);
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout(slideShow, imgDuration);
}

slideShow()