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

+
+
+

Rider: Patrick

+
+
@@ -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; }