const images = document.querySelector(".gallery");
const buttons = document.querySelectorAll(".buttons");
const imageNum = document.querySelectorAll(".card").length;
const previous = document.getElementById("previous");
const next = document.getElementById("next");
let imageCount = 1;
let translateX = 0;

buttons.forEach((button) => {
  button.addEventListener("click", (event) => {
    if (event.target.id === "previous") {
      if (imageCount !== 1) {
        imageCount--;
        translateX += 220;
      }
    } else {
      if (imageCount !== imageNum) {
        imageCount++;
        translateX -= 220;
      }
    }

    images.style.transform = `translateX(${translateX}px)`;

    if (imageCount !== 1) {
      previous.classList.remove("buttonOpacity");
    } else {
      previous.classList.add("buttonOpacity");
    }

    if (imageCount !== imageNum) {
      next.classList.remove("buttonOpacity");
    } else {
      next.classList.add("buttonOpacity");
    }
  });
});