I'm following a tutorial on how to make an image carousel slider. I tried breaking down the problem on pen and paper but I never knew I would need a counter for the images. I feel like I'm just copying the code and not really understanding it. If someone could explain this to me that would be great.

const slideContainer = document.querySelector(".slide")
const carouselImages = document.querySelectorAll(".carousel-container img")
const lastCloneImage = document.querySelector("#last-clone-image")
const firstCloneImage = document.querySelector("#first-clone-image")
const prevArrowButton = document.querySelector("#prev")
const nextArrowButton = document.querySelector("#next")

let counter = 1;
const size = carouselImages[0].clientWidth

nextArrowButton.addEventListener("click", imageNextMove)
prevArrowButton.addEventListener("click", imagePrevMove)

// this selects the slide with the images in it and moves the container itself with all the images in it 
slideContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';

function imageNextMove() {
    slideContainer.style.transition = 'transform 0.4s ease-in-out'
    counter++;
    slideContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';


}
function imagePrevMove() {
    slideContainer.style.transition = 'transform 0.4s ease-in-out'
    counter--;
    slideContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';

}