const slideArea = document.querySelector("slidearea")  // het gebied waarin de slides staan
const slides = slideArea.querySelectorAll("div.progressslide") // de slides (list)
const nextTag = document.querySelector("div.slidenext")
const previousTag = document.querySelector("div.slideprev")


// belangrijke variabelen
let currentSlide = 0 //op welke slide bevind ik me?
let z = 1 //welke z-index moet de slide krijgen

// pas de z-index aan wanneer ik in het scherm klik
nextTag.addEventListener("click", function(){
    currentSlide = currentSlide + 1
    z = z + 1



    //haal de animatie van de slide af, zodat deze later weer opnieuw kan afspelen
    slides.forEach(slide=> {
        slide.style.animation = ""
    })

    // ga terug naar de eerste slide als je voorbij de laatste komt
    if(currentSlide > slides.length - 1){
        currentSlide = 0
    }

    // pas de z-index toe op de juiste slide
    slides[currentSlide].style.zIndex = z

    //animatie slide
    slides[currentSlide].style.animation = "fade 2s"

})

previousTag.addEventListener("click", function(){
    currentSlide = currentSlide - 1
    z = z + 1



    //haal de animatie van de slide af, zodat deze later weer opnieuw kan afspelen
    slides.forEach(slide=> {
        slide.style.animation = ""
    })

    // ga terug naar de eerste slide als je voorbij de laatste komt
    if(currentSlide < 0){
        currentSlide = slides.length - 1
    }

    // pas de z-index toe op de juiste slide
    slides[currentSlide].style.zIndex = z

    //animatie slide
    slides[currentSlide].style.animation = "fade 2s"

})