JS ahora funciona de forma automática, pero quiero crear botones a la izquierda y a la derecha y deslizarlo al hacer clic

esto es 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>>

esto es css

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

/// Esto es JavaScript, quiero trabajar en 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()