Banner rotator respects tags

src/components/BannerRotator.astro

@@ -3,13 +3,14 @@ import type { HomepageBannerImage } from '../lib/fallback-data';
 
 type Props = {
   images: HomepageBannerImage[];
+  randomizeAfterFirst?: boolean;
 };
 
-const { images } = Astro.props;
+const { images, randomizeAfterFirst = false } = Astro.props;
 const slides = images.length > 0 ? images : [{ src: '/images/banner.png', alt: 'Swansea Airport banner' }];
 ---
 
-<div class="banner-rotator" data-banner-rotator>
+<div class="banner-rotator" data-banner-rotator data-randomize-after-first={randomizeAfterFirst ? 'true' : undefined}>
   {slides.map((image, index) => (
     <img
       class:list={['banner-slide', { active: index === 0 }]}
@@ -31,6 +32,18 @@ const slides = images.length > 0 ? images : [{ src: '/images/banner.png', alt: '
       const slides = Array.from(root.querySelectorAll('[data-banner-slide]'));
       if (slides.length < 2) return;
 
+      if (root.getAttribute('data-randomize-after-first') === 'true') {
+        const firstSlide = slides[0];
+        const restSlides = slides.slice(1);
+
+        for (let index = restSlides.length - 1; index > 0; index -= 1) {
+          const swapIndex = Math.floor(Math.random() * (index + 1));
+          [restSlides[index], restSlides[swapIndex]] = [restSlides[swapIndex], restSlides[index]];
+        }
+
+        slides.splice(0, slides.length, firstSlide, ...restSlides);
+      }
+
       let currentIndex = 0;
       window.setInterval(() => {
         slides[currentIndex].classList.remove('active');