const leftButton = document.querySelector('.previous');
const rightButton = document.querySelector('.next');
const gallery = document.querySelector('.gallery');
const pictures = document.querySelectorAll('.card');
let translate = 0;
let clickPrevious = (e) => {
if (translate < 0) {
translate = translate + 220;
gallery.style.transform = `translateX(${translate}px)`;
leftButton.style.opacity = 1;
} else {
leftButton.style.opacity = .3;
rightButton.style.opacity = 1;
}
}
let clickNext = (e) => {
if (translate > (pictures.length - 1) * (-220)) {
translate = translate - 220
gallery.style.transform = `translateX(${translate}px)`;
rightButton.style.opacity = 1;
} else {
rightButton.style.opacity = .3;
leftButton.style.opacity = 1;
}
};
leftButton.addEventListener("click", clickPrevious);
rightButton.addEventListener("click", clickNext);