Added dots to slider

assets/main.scss

@@ -74,6 +74,7 @@ h1 {
                 width: calc(100% - 20px);
                 // display: block;
                 position: absolute;
+                z-index: 0;
                 opacity: 1;
                 transition: opacity 2.5s ease-in-out;
 
@@ -81,6 +82,31 @@ h1 {
                     opacity: 0;
                 }
             }
+
+            .dots {
+                position: absolute;
+                width: 95%;
+                z-index: 1;
+                left: 0;
+                bottom: 10%;
+                display: flex;
+                justify-content: end;
+
+                .dot {
+                    width: 10px;
+                    height: 10px;
+                    margin: 0 10px 0 0;
+                    border-radius: 5px;
+
+                    background-color: #eee;
+                    border: 1.5px solid #444;
+
+                    &.active {
+                        background-color: #444;
+                        border: 1.5px solid #ccc;
+                    }
+                }
+            }
         }
 
         > .nav {

themes/tsc_vfl/layouts/partials/page/header.html

@@ -14,6 +14,14 @@
         <img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden">
         <img src="{{ relURL "img/banner/Paare_2019.jpg" }}" class="hidden">
         <img src="{{ relURL "img/banner/slider-turnier.jpg" }}" class="hidden">
+        <div class="dots">
+            <div data-index="0" class="dot active"></div>
+            <div data-index="1" class="dot"></div>
+            <div data-index="2" class="dot"></div>
+            <div data-index="3" class="dot"></div>
+            <div data-index="4" class="dot"></div>
+            <div data-index="5" class="dot"></div>
+        </div>
     </div>
     <div id="nav-border" class="container nav">
         <nav id="nav" class="nav justify-content-center">

themes/tsc_vfl/static/js/slider.js

@@ -3,9 +3,14 @@ $(function () {
     const maxIndex = 5
     const delay = 7000
     function showImage(idx) {
+        // console.log("switching to index", idx)
         const imgs = $('#header .slider img')
         imgs.eq(idx).removeClass('hidden')
         imgs.filter((i, e) => {return i != idx}).addClass('hidden')
+        const dots = $('#header .slider .dots .dot')
+        dots.removeClass('active')
+        dots.eq(idx).addClass('active')
+        index = idx
     }
     function getNextIndex() {
         const ret = index + 1
@@ -17,10 +22,13 @@ $(function () {
     }
     function nextImage() {
         const newIdx = getNextIndex()
-        console.log("switching to index", newIdx)
         showImage(newIdx)
-        index = newIdx
         setTimeout(nextImage, delay)
     }
     setTimeout(nextImage, delay)
+    $('#header .slider .dots .dot').click(function (evt) {
+        // console.log(evt)
+        const newIdx = $(evt.target).data('index')
+        showImage(newIdx)
+    })
 })