function setActiveSlideLink(slideNr) {
    const slidelinks = document.querySelectorAll('.slide-link');
    for (i = 0; i < slidelinks.length; i++) {
    if (i == slideNr){
        slidelinks[i].classList.add("slide-link-active");
    } else {
        slidelinks[i].classList.remove("slide-link-active");
    }
    }
}

function scrollToSlide(slideNr) {
    const slider = document.querySelector('.slider');
    const slides = slider.querySelector('.slides');
    const width = slider.querySelector('.slide').clientWidth;
    slides.scrollTo({left: slideNr * width, top: 0, behavior:'smooth'});
    setActiveSlideLink(slideNr);
}

function scrollToNextSlideNr(slideNr) {
    const slidelinks = document.querySelectorAll('.slide-link');
    nextSlide = slideNr + 1;
    if (nextSlide >= slidelinks.length){
        nextSlide = 0;
    }          
    scrollToSlide(nextSlide);
}

function scrollToPrevSlideNr(slideNr) {
    const slidelinks = document.querySelectorAll('.slide-link');
    prevSlide = slideNr - 1;
    if (prevSlide < 0) {
        prevSlide = slidelinks.length - 1;
    }
    scrollToSlide(prevSlide);
}

function scrollToNextSlide() {
    const slidelinks = document.querySelectorAll('.slide-link');
    for (i = 0; i < slidelinks.length; i++) {
        if (slidelinks[i].classList.contains("slide-link-active")){
            nextSlide = i+1;
            if (nextSlide >= slidelinks.length){
                nextSlide = 0;
            }          
            scrollToSlide(nextSlide);
            break;
        }
    }
}