Slim carousel page weight, with stable per-instance slide IDs

src/components/ImageCarousel.astro

@@ -6,6 +6,7 @@ import { shuffleArray } from "@lib/utils";
 
 interface Props {
   images: Array<ImageMetadata>;
+  id?: string;
   class: string;
   altText?: string | ((index: number) => string);
   interval?: number;
@@ -23,6 +24,7 @@ interface Props {
 
 const {
   images,
+  id = "carousel",
   class: className,
   altText = null,
   interval = 5000,
@@ -38,8 +40,6 @@ const {
   shuffle = false
 } = Astro.props as Props;
 
-const IDs: string[] = [];
-
 const imagesArray = shuffle ? shuffleArray(images) : images;
 ---
 
@@ -50,12 +50,9 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
 
     {
       imagesArray.map((image, index) => {
-        const ID = `image-carousel-${Math.random().toString(36)}`;
-        IDs.push(ID);
-
         return (
           <Image
-            data-id={`${ID}`}
+            data-id={`${id}-${index}`}
             class:list={[
               "absolute !h-full w-full object-cover object-center transition-opacity",
               transitionStyle,
@@ -89,16 +86,19 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
   <slot />
 </div>
 
-<script define:vars={{ imagesArray, interval, IDs }}>
+<script
+  define:vars={{ imageCount: imagesArray.length, carouselId: id, interval }}
+>
   let currentIndex = 0;
 
   setInterval(() => {
-    const total = imagesArray.length;
     const current = document.querySelectorAll(
-      `[data-id="${IDs[currentIndex]}"]`
+      `[data-id="${carouselId}-${currentIndex}"]`
+    )[0];
+    const nextIndex = (currentIndex + 1) % imageCount;
+    const next = document.querySelectorAll(
+      `[data-id="${carouselId}-${nextIndex}"]`
     )[0];
-    const nextIndex = (currentIndex + 1) % total;
-    const next = document.querySelectorAll(`[data-id="${IDs[nextIndex]}"]`)[0];
 
     if (!current || !next) return;
 
@@ -109,9 +109,9 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
     next.classList.remove("opacity-0", "hidden");
     next.setAttribute("aria-hidden", "false");
 
-    const preloadIndex = (nextIndex + 1) % total;
+    const preloadIndex = (nextIndex + 1) % imageCount;
     const preloadImage = document.querySelectorAll(
-      `[data-id="${IDs[preloadIndex]}"]`
+      `[data-id="${carouselId}-${preloadIndex}"]`
     )[0];
     if (preloadImage) {
       preloadImage.classList.add("opacity-0");

src/pages/404.astro

@@ -14,6 +14,7 @@ const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
 <MainLayout title="Oops! 404" navbarDisplay="transparent">
   <div class="absolute inset-0 h-full w-full bg-black">
     <ImageCarousel
+      id="not-found"
       images={heroImagesArray}
       class="h-full w-full"
       foreground={true}

src/pages/index.astro

@@ -56,6 +56,7 @@ const tracks = (
   <div class="h-screen w-full flex-row">
     <div class="absolute inset-0 h-full w-full bg-black">
       <ImageCarousel
+        id="hero"
         images={heroImagesArray}
         class="h-full w-full"
         foreground={true}
@@ -108,6 +109,7 @@ const tracks = (
     <section id="cta" class="text-white">
       <div class="flex h-48 w-full items-center justify-center">
         <ImageCarousel
+          id="cta"
           images={imagesForCTAArray}
           class="h-full w-full"
           foreground={true}
@@ -192,6 +194,7 @@ const tracks = (
     <section id="fillerUntilServicesIsComplete" class="text-white">
       <div class="flex h-96 w-full items-center justify-center">
         <ImageCarousel
+          id="filler"
           images={imagesForCTAArray}
           class="h-full w-full"
           foreground={true}

src/pages/projects/[type]/[slug].astro

@@ -65,6 +65,7 @@ import P from "@components/MDX/P.astro";
     <section id="title" class="text-white">
       <div class="flex h-100 w-full items-center justify-center">
         <ImageCarousel
+          id="project-hero"
           images={images}
           class="h-full w-full"
           foreground={true}