Add sixth hero image and randomize slide order

index.html

@@ -118,6 +118,11 @@ <h1 class="site-title"><span>Pumpfoilers</span><span>Code of Conduct</span></h1>
             <p>Rider: Naomi | Photo: Patrick Federi</p>
           </div>
         </div>
+        <div class="slide" style="background-image: url('./src/images/hero/hero-6.jpg')">
+          <div class="slide-caption">
+            <p>Rider: Patrick</p>
+          </div>
+        </div>
       </div>
 
       <!-- Gradient Overlay -->
@@ -141,6 +146,7 @@ <h2 class="reveal-text" data-i18n="hero_title">Pumpfoiling<br>in Switzerland</h2
         <div class="dot" data-slide="2"></div>
         <div class="dot" data-slide="3"></div>
         <div class="dot" data-slide="4"></div>
+        <div class="dot" data-slide="5"></div>
       </div>
     </section>
 

src/js/main.js

@@ -246,26 +246,24 @@ function initSlider() {
       container.removeChild(slide);
     });
 
-    // Keep first slide, shuffle the rest
-    const firstSlide = slidesArray[0];
-    const remainingSlides = slidesArray.slice(1);
-
-    // Shuffle remaining slides
-    for (let i = remainingSlides.length - 1; i > 0; i--) {
+    // Shuffle all slides, including which one starts first
+    for (let i = slidesArray.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
-      [remainingSlides[i], remainingSlides[j]] = [remainingSlides[j], remainingSlides[i]];
+      [slidesArray[i], slidesArray[j]] = [slidesArray[j], slidesArray[i]];
     }
-
-    // Re-append slides in new order (first slide first, then shuffled remaining slides)
-    container.appendChild(firstSlide);
-    remainingSlides.forEach(slide => {
+
+    // Re-append slides in new order
+    slidesArray.forEach(slide => {
       container.appendChild(slide);
     });
-    
+
     // Set first slide as active and ensure others are hidden
-    firstSlide.classList.add('active');
-    remainingSlides.forEach(slide => {
-      slide.classList.remove('active');
+    slidesArray.forEach((slide, index) => {
+      if (index === 0) {
+        slide.classList.add('active');
+      } else {
+        slide.classList.remove('active');
+      }
     });
 
     // Update slides and dots references with the new order

src/scss/style.scss

@@ -393,7 +393,8 @@ a {
       // Ausrichtung nach Hintergrundbild, nicht nach Position im DOM
       &[style*="hero-3.jpg"],
       &[style*="hero-4.jpg"],
-      &[style*="hero-5.jpg"] {
+      &[style*="hero-5.jpg"],
+      &[style*="hero-6.jpg"] {
         @media (max-width: 992px) {
           background-position: right center;
         }