const previousBtn = document.getElementById("previous")
const nextBtn = document.getElementById("next")
const gallery = document.getElementById("gallery")
const n = gallery.getElementsByClassName("card").length

let increse = -220
let decrese = 220
let x = 0

function handleNextBtnClick() {
  if (x > increse * (n - 1)) {
    previousBtn.style.opacity = "1"
    x += increse
    gallery.style.transform = `translateX(${x}px)`
  }
}

function handlePreviousBtnClick() {
  if (x != 0) {
    x += decrese
    gallery.style.transform = `translateX(${x}px)`
  }
}

nextBtn.addEventListener("click", handleNextBtnClick)
previousBtn.addEventListener(
  "click",
  handlePreviousBtnClick
)