// javascript
const gallery = document.querySelector('.gallery');
const next= document.querySelector('.next');
const previous = document.querySelector('.previous');

next.addEventListener('click', nextimage);
previous.addEventListener('click', nextimage);
let translateVal = 0;

function nextimage(event){
    if(event.target.className == 'next' && translateVal > -880 ){
        translateVal -= 220;
        gallery.style.transform = `translateX(${translateVal}px)`
        
    }
    else if(event.target.className == 'previous' && translateVal < 0){
        translateVal += 220;
        gallery.style.transform = `translateX(${translateVal}px)`
    }
    
    if(translateVal == -880){
              next.style.opacity = '.3';
              next.style.cursor = 'default';
    }
    else{
        next.style.opacity = '1';
        next.style.cursor = 'pointer';
    }
    if(translateVal != 0){
        previous.style.opacity = '1';
        previous.style.cursor = 'pointer';
    }
    else{
        previous.style.opacity = '.3';
        previous.style.cursor = 'default';
    }
    
}