Estoy tratando de crear un efecto de deslizamiento hacia la izquierda y hacia la derecha con un botón de comando al hacer clic en elementos cargados dinámicamente usando CSS y JS.

He podido hacer que los botones llamen a una función de traducción, pero solo se mueven hacia la izquierda/derecha solo una vez. dado que tengo muchos elementos cargados dinámicamente, quiero que el botón pueda traducir las imágenes de izquierda a derecha una y otra vez. ¿Hay alguna forma de hacerlo? aquí está el enlace codepen

 <!--Category Images--> <button id="button" class="btn" onclick="translateRight()">Prev</button> <div id="itemImages" class="d-flex container-fluid CatImages " alt="store items"></div> <button id="button" class="btn" onclick="translateLeft()">Next</button> <style> .item { display: inline-flex; background-color: white; padding: 10px; margin: 0px 20px 0px 20px; text-align: center; transform: translate(-0%,0%); } .btn { height: 80px; width: 100px; background-color: white; z-index: 99; margin: 6% 0% 0% 0%; box-shadow: 6px 7px 10px 2px #efefef; text-align: center; }</style><script> function translateLeft(){ var translateLeft = document.getElementById("itemImages").style.transform = "translate(-20%,0%)" } function translateRight(){ var translateRight = document.getElementById("itemImages").style.transform = "translate(20%,0%)" } </script>