Vanilla JS content slider translatex issue

---

таким образом, в основном у меня есть два eventListeners для стрелки влево и вправо внутри этих eventListeners im циклически проходит через массив изображений, и если я нажимаю вправо, то изображения переводятся 50px вправо, но если я снова нажимаю вправо, то изображения не переводятся вправо более одного раза. Та же проблема и с левым eventListener что я могу здесь сделать ? я попробовал использовать аккумулятор, но он не работал должным образом.

<div id='container'>
	<div class='image-container'>
		<img class='move' src='images/news1.jpg'>
		<img class='move' src='images/news2.jpg'>
		<img class='move' src='images/news3.jpg'>
	</div>
	
</div>
<a href="#" id='arrow-left'>left</a>
<a href="#" id='arrow-right'>right</a>

JS :

let imageContainer = document.querySelector('.image-container');
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let images = document.getElementsByClassName('move');
images = Array.from(images);

 arrowRight.addEventListener('click' , function() {
    function getImg (img) {
    	img.style.transition = "0.5s";
    	img.style.transform = 'translateX(50px)';
    };
    let result = images.forEach((element) => getImg(element));
});

arrowLeft.addEventListener('click' , function() {
	function getImg (img) {
		img.style.transition = "0.5s";
	    img.style.transform = 'translateX(-50px)';
	}
	let result = images.forEach((element) => getImg(element));
});

Что я уже пробовал:

я пробовал использовать аккумулятор, поэтому каждый раз, когда eventListener срабатывает, он добавляет 50px к translateX, поэтому он перемещается более одного раза, но каждый раз он накапливается, поэтому, если я нажимаю один раз, изображения перемещаются на 50px, но если я нажимаю снова, он перемещается на 100px вправо, что не является правильным решением

---