Build slideshow dynamically

Signed-off-by: Christian Wolf <github@christianwolf.email>

themes/tsc_vfl/layouts/partials/page/banner-images.html

@@ -1,15 +1,22 @@
-<img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="placeholder">
+{{- $images := resources.Match "banner/*" -}}
-<img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="hidden slider-img">
+{{- $first := true -}}
-<img src="{{ relURL "img/banner/Banner-Show2016.jpg" }}" class="hidden slider-img">
+{{- range $images }}
-<img src="{{ relURL "img/banner/Banner2019.jpg" }}" class="hidden slider-img">
+    {{- $img := .Fit "1220x340 webp" -}}
-<img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden slider-img">
+    {{ if $first }}
-<img src="{{ relURL "img/banner/Paare_2019.jpg" }}" class="hidden slider-img">
+        <img src="{{ $img.RelPermalink }}" class="placeholder">
-<img src="{{ relURL "img/banner/slider-turnier.jpg" }}" class="hidden slider-img">
+        {{ $first = false }}
+    {{ end }}
+    <img src="{{ $img.RelPermalink }}" class="hidden slider-img">
+{{ end -}}
 <div class="dots">
-    <div data-index="0" class="dot active"></div>
+    {{- $count := (len $images) -}}
-    <div data-index="1" class="dot"></div>
+    {{- $first := true -}}
-    <div data-index="2" class="dot"></div>
+    {{- range (seq 0 (sub $count 1)) }}
-    <div data-index="3" class="dot"></div>
+        <div data-index="{{ . }}" class="dot {{ if $first }}active{{ end }}"></div>
-    <div data-index="4" class="dot"></div>
+        {{ $first = false }}
-    <div data-index="5" class="dot"></div>
+    {{- end }}
 </div>
+<script>
+    const numImages = {{ $count }};
+</script>
+<script defer src="{{ relURL "js/slider.js" }}"></script>

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

@@ -19,7 +19,6 @@
     <title>{{ $title }}</title>
     <link rel="canonical" href="{{ .Permalink }}" />
     <script defer src="{{ relURL "js/jquery-3.6.3.min.js" }}"></script>
-    <script defer src="{{ relURL "js/slider.js" }}"></script>
     <script defer src="{{ relURL "js/gallery.js" }}"></script>
     <script defer src="{{ (resources.Get "js/mails.js" ).RelPermalink }}"></script>
 </head>

themes/tsc_vfl/static/js/slider.js

@@ -1,6 +1,6 @@
 $(function () {
     var index = 0
-    const maxIndex = 5
+    const maxIndex = numImages - 1
     const delay = 6000
     const shuffeledIndices = []