const prev = document.querySelector('.previous')
const next = document.querySelector('.next')
const gallery = document.querySelector('.gallery')
let transform = 0

function updateArrows() {
    if(transform === 0) {
        next.style.opacity = 0.3
        prev.style.opacity = 1
    } else {
        next.style.opacity = 1
    }
    if (transform === -880) {
        prev.style.opacity = 0.3
        next.style.opacity = 1
    } else {
        prev.style.opacity = 1
    }
}

prev.addEventListener('click', () => {
    if(transform > -880) {
        transform -= 220
        gallery.style.transform = `translateX(${transform}px)`
    }
    updateArrows()
})

next.addEventListener('click', () => {
    if(transform < 0) {
        transform += 220
        gallery.style.transform = `translateX(${transform}px)`   
    }
    updateArrows()
})