Initial Commit

static/js/slider.js

@@ -0,0 +1,50 @@
+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;
+        }
+    }
+}