Merge branch 'enh/banner-dynamic' into develop

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

@@ -0,0 +1,22 @@
+{{- $images := resources.Match "banner/*" -}}
+{{- $first := true -}}
+{{- range $images }}
+    {{- $img := .Fit "1220x340 webp" -}}
+    {{ if $first }}
+        <img src="{{ $img.RelPermalink }}" class="placeholder">
+        {{ $first = false }}
+    {{ end }}
+    <img src="{{ $img.RelPermalink }}" class="hidden slider-img">
+{{ end -}}
+<div class="dots">
+    {{- $count := (len $images) -}}
+    {{- $first := true -}}
+    {{- range (seq 0 (sub $count 1)) }}
+        <div data-index="{{ . }}" class="dot {{ if $first }}active{{ end }}"></div>
+        {{ $first = false }}
+    {{- 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/layouts/partials/page/header.html

@@ -8,21 +8,7 @@
         </a>
     </div>
     <div class="slider">
-        <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="placeholder">
-        <img src="{{ relURL "img/banner/Banner-RENOTE.jpg" }}" class="hidden slider-img">
-        <img src="{{ relURL "img/banner/Banner-Show2016.jpg" }}" class="hidden slider-img">
-        <img src="{{ relURL "img/banner/Banner2019.jpg" }}" class="hidden slider-img">
-        <img src="{{ relURL "img/banner/Fotobanner2.jpg" }}" class="hidden slider-img">
-        <img src="{{ relURL "img/banner/Paare_2019.jpg" }}" class="hidden slider-img">
-        <img src="{{ relURL "img/banner/slider-turnier.jpg" }}" class="hidden slider-img">
-        <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>
+        {{ partial "page/banner-images.html" . }}
     </div>
     <div id="nav-border" class="container nav">
         <nav id="nav" class="nav justify-content-center">

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 = []