// javascript
const btnR = document.querySelector('.next');
const btnL = document.querySelector('.previous');
const cards = document.querySelectorAll('.card');

//gallery translate -220 *
const gallery = document.querySelector('.gallery');

let g = 0;

btnR.addEventListener('click', () => {
  btnL.style.opacity = 0.3;
  btnR.style.opacity = 1;
  gallery.style.transform = `translateX(-${(g += 220)}px)`;

  if (g > 880) {
    gallery.style.transform = `translateX(-${(g = 0)}px)`;
  }
});

btnL.addEventListener('click', () => {
  btnL.style.opacity = 1;
  btnR.style.opacity = 0.3;
  gallery.style.transform = `translateX(-${(g -= 220)}px)`;
  if (g < 0) {
    gallery.style.transform = `translateX(-${(g = 880)}px)`;
  }
});