let left = document.querySelector('#left'); let right = document.querySelector('#right'); let counter = 1; let img_contant = document.querySelector('.img_contant'); let size = img_contant.clientWidth; let increment = function () { img_contant.style = `margin-left: ` + counter * size + `px`; counter++; console.log(counter); } let decrement = function () { img_contant.style = `margin-left: ` + counter * size + `px`; counter--; console.log(counter); } left.addEventListener('click', decrement); right.addEventListener('click', increment);En su código de incremento y decremento, no está utilizando la propiedad style.marginLeft que se pretende. verifique el siguiente código
let left = document.querySelector('#left'); let right = document.querySelector('#right'); let counter = 0; let img_contant = document.querySelector('.img_contant'); let size = img_contant.clientWidth; const increment = function () { counter++; img_contant.style.marginLeft = `${counter * size}px`; } const decrement = function () { counter--; img_contant.style.marginLeft = `${counter * size}px`; } left.addEventListener('click', decrement); right.addEventListener('click', increment); <button id="left"> Left </button> <button id="right"> Right </button> <div> <img class="img_contant" src="https://st.depositphotos.com/1000459/2436/i/450/depositphotos_24366251-stock-photo-soccer-ball.jpg" height = 200 width = 200 /> </div>Los atributos de estilo se convierten de dash-case a camelCase para la propiedad de estilo.
img_contant.style.marginLeft = contador * tamaño + 'px';