const btnPrev = document.querySelector('.previous');
const btnNext = document.querySelector('.next');
const gallery = document.querySelector('.gallery');
let translateX = 0;

function slider(e) {
    if (e.target === btnNext && !btnNext.classList.contains('disabled')) {
        gallery.style.transform = `translateX(${(translateX -= 220)}px)`;
        btnPrev.classList.remove('disabled');
    }

    if (e.target === btnPrev && !btnPrev.classList.contains('disabled')) {
        gallery.style.transform = `translateX(${(translateX += 220)}px)`;
        btnNext.classList.remove('disabled');
    }
    prevNext();
}

function prevNext() {
    translateX <= -880 ? btnNext.classList.add('disabled') : false;
    translateX >= 0 ? btnPrev.classList.add('disabled') : false;
}

btnPrev.onclick = slider;
btnNext.onclick = slider;