diff --git a/index.html b/index.html
index 62bb3d2..48b2187 100644
--- a/index.html
+++ b/index.html
@@ -118,6 +118,11 @@
PumpfoilersCode of Conduct
Rider: Naomi | Photo: Patrick Federi
+
@@ -141,6 +146,7 @@ Pumpfoiling
in Switzerland
+
diff --git a/src/images/hero/hero-6.jpg b/src/images/hero/hero-6.jpg
new file mode 100644
index 0000000..d102013
Binary files /dev/null and b/src/images/hero/hero-6.jpg differ
diff --git a/src/js/main.js b/src/js/main.js
index 60fefe7..b9aebc3 100644
--- a/src/js/main.js
+++ b/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
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 21fc332..f90aaa0 100644
--- a/src/scss/style.scss
+++ b/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;
}