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);
In your increment and decrement code, you are not using the style.marginLeft property which is intended. check the below code
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>Style attributes are converted from dash-case to camelCase for the style property.
img_contant.style.marginLeft = counter * size + 'px';