// javascript

const next = document.getElementById('next')
const previous = document.getElementById('previous') 
const gallery = document.getElementById('gallery')
let value = 0;

next.addEventListener('click', next_pic_at_click)
document.addEventListener('keyup', next_pic)
previous.addEventListener('click', previous_pic)


function next_pic_at_click (event){
        if(value !== -880){value -= 220}
        gallery.style.transform = `translateX(${value}px)`
}

function next_pic (event){
    switch(event.keyCode){
        case 39:
        if(value !== -880){value -= 220}
        gallery.style.transform = `translateX(${value}px)`
        break;
        case 37:
        previous_pic()
        break;
    }
}

function previous_pic (){
    if(value !== 0){value += 220}
    gallery.style.transform = `translateX(${value}px)`
}