// javascript
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const gallery = document.querySelector('.gallery');
let transformXValue = 0;
let transformXValuepx="";

next.addEventListener('click', event => {
    if (transformXValue <= 0 
        && transformXValue > -660) {
            transformXValue = transformXValue + -220;
            transformXValuepx=`${transformXValue}px`;
            gallery.style.transform = `translateX(${transformXValuepx})`;
            gallery.style.transition = "transform 2s";
            previous.style.opacity = "1";
    } else if (transformXValue === -660) {
            transformXValue = transformXValue + -220;
            transformXValuepx=`${transformXValue}px`;
            gallery.style.transform = `translateX(${transformXValuepx})`;
            next.style.opacity = ".3";
            previous.style.opacity = "1";
    }
});

previous.addEventListener('click', event => {
    if (transformXValue >= -880 
        && transformXValue < -220) {
            transformXValue = transformXValue + 220;
            transformXValuepx=`${transformXValue}px`;
            gallery.style.transform = `translateX(${transformXValuepx})`;
            previous.style.opacity = "1";
            next.style.opacity = "1";
    } else if (transformXValue === -220) {
            transformXValue = transformXValue + 220;
            transformXValuepx=`${transformXValue}px`;
            gallery.style.transform = `translateX(${transformXValuepx})`;
            next.style.opacity = "1";
            previous.style.opacity = ".3";
    }
});