const allImages = ['presents.jpg', 'cookies.jpg', 'santa.jpg', 'candycane.jpg', 'reindeer.jpg'];
const sliderImage = document.querySelector('.gallery .card');
const prevButton = document.querySelector('.previous');
const nextButton = document.querySelector('.next');

let currentImage = 0;
prevButton.style.opacity = 0.3;

function showNextImage() {
    currentImage = currentImage < allImages.length -1 ? currentImage + 1 : currentImage;
    sliderImage.src = `./${allImages[currentImage]}`;
    changeButtonsOpacity();
}

function showPrevImage() {
    currentImage = currentImage > 0 ? currentImage - 1 : currentImage;
    sliderImage.src = `./${allImages[currentImage]}`;
    changeButtonsOpacity();
}

function changeButtonsOpacity() {
    const [prevButtonOpacity, nextButtonOpacity] = [
        currentImage === 0 ? .3 : 1,
        currentImage === allImages.length - 1? .3 : 1
    ];
    [prevButton.style.opacity, nextButton.style.opacity] = [prevButtonOpacity, nextButtonOpacity];
}

nextButton.addEventListener('click', showNextImage);
prevButton.addEventListener('click', showPrevImage);