// javascript
const slide = document.querySelector(".gallery")
const images = document.querySelectorAll(".card")
const prev = document.querySelector(".previous")
const next = document.querySelector(".next")

let slidePosition = 0;
const totalSlides = images.length;


// button listeners
next.addEventListener('click', () => {
  moveToNextSlide()
})

prev.addEventListener('click', () => {
    moveToPrevSlide()
})

function updateSlidePosition() {
  for(let image of images){
    image.classList.remove("current");
    image.classList.add("hidden")
  }
  images[slidePosition].classList.add('current')
}

const moveToNextSlide = () => {
  if(slidePosition === totalSlides - 1) slidePosition = 0
  else{
    slidePosition++
  }
    updateSlidePosition();
}

const moveToPrevSlide = () => {
  if(slidePosition === 0) slidePosition = totalSlides - 1
  else {
    slidePosition--
  }
      updateSlidePosition();
}