// javascript
let last = document.getElementsByClassName("previous");
let next = document.getElementsByClassName("next");
let number = 0;

function photoChange() {
    let transform = number * -220;

    document.getElementsByClassName("gallery")[0].style.transform =
        "translateX(" + transform + "px)";
}

function add() {
    if (number < 4) {
        number++;
        if (number == 1) {
            last[0].style.opacity = "1";
        } else if (number == 4) {
            next[0].style.opacity = "0.3";
        }

        photoChange(number);
    }

}

function less() {
    if (number > 0) {
        number--;
        if (number == 0) {
            last[0].style.opacity = "0.3";
        } else if (number == 3) {
            next[0].style.opacity = "1";
        }

        photoChange(number);
    }

}


var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("card");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1
    }
    slides[slideIndex - 1].style.display = "block";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

next[0].addEventListener('click', add);
last[0].addEventListener('click', less);