const prevButton = document.querySelector('.previous');
const nextButton = document.querySelector('.next');
const gallery = document.querySelector('.gallery');
const cards = document.querySelectorAll('.card');

let currentCard = 0;
const lastCard = cards.length - 1;

const slide = (num) => {
    const prevCard = currentCard;
    const nextCard = currentCard + num;

    currentCard = Math.max(nextCard, 0);
    currentCard = Math.min(currentCard, lastCard);

    gallery.style = `transform: translateX(-${currentCard * 220}px);`;
    cards[prevCard].classList.remove('current');
    cards[currentCard].classList.add('current');

    prevButton.style = 'opacity: 1';
    nextButton.style = 'opacity: 1';
    if (currentCard === 0) {
        prevButton.style = 'opacity: .3';
    } else if (currentCard === lastCard) {
        nextButton.style = 'opacity: .3';
    }
}

nextButton.addEventListener('click', () => slide(1));
prevButton.addEventListener('click', () => slide(-1));