Add rotating images to Shop module

src/components/organisms/Shop.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -18,20 +18,46 @@
         .sort((a: Location, b: Location) => a.slug.localeCompare(b.slug))
         // Return name only
         .map((loc: Location) => loc.name)
+
+
+    // Image rotation
+    let imagesLoop: ReturnType<typeof setTimeout>
+    let currentImageIndex = 0
+
+    const incrementCurrentImageIndex = () => {
+        currentImageIndex = currentImageIndex === shop.module_images.length - 1 ? 0 : currentImageIndex + 1
+        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
+    }
+
+    onMount(() => {
+        incrementCurrentImageIndex()
+
+        return () => {
+            // Clear rotating words timeout
+            clearTimeout(imagesLoop)
+        }
+    })
 </script>
 
 <div class="shop shadow-box-dark">
     <div class="content">
-        <div class="shop__image">
-            <Image
-                id={shop.module_image.id}
-                sizeKey="square"
-                sizes={{
-                    small: { width: 400, height: 400 },
-                    large: { width: 800, height: 800 },
-                }}
-                alt={shop.module_image.title}
-            />
+        <div class="shop__images">
+            {#if shop.module_images}
+            <a href="/shop" sveltekit:noscroll sveltekit:prefetch>
+                {#each shop.module_images as { directus_files_id: { id }, title }, index}
+                    <Image
+                        class={index === currentImageIndex ? 'is-visible' : null}
+                        {id}
+                        sizeKey="square"
+                        sizes={{
+                            small: { width: 400, height: 400 },
+                            large: { width: 800, height: 800 },
+                        }}
+                        alt={title}
+                    />
+                {/each}
+            </a>
+            {/if}
         </div>
 
         <div class="shop__content">