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">
+        <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
-                id={shop.module_image.id}
+                        class={index === currentImageIndex ? 'is-visible' : null}
+                        {id}
                         sizeKey="square"
                         sizes={{
                             small: { width: 400, height: 400 },
                             large: { width: 800, height: 800 },
                         }}
-                alt={shop.module_image.title}
+                        alt={title}
                     />
+                {/each}
+            </a>
+            {/if}
         </div>
 
         <div class="shop__content">

src/routes/__layout.svelte

@@ -129,11 +129,13 @@
                     enabled
                     module_title
                     module_text
-                    module_image {
+                    module_images {
+                        directus_files_id {
                             id
                             title
                         }
                     }
+                }
 
                 # Count
                 countPhotos: photo_aggregated (filter: { status: { _eq: "published" }}) {

src/style/organisms/_shop.scss

@@ -17,11 +17,26 @@
         }
     }
 
-    // Image
+    // Images
-    &__image {
+    &__images {
         position: relative;
         overflow: hidden;
 
+        picture {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transform: scale3d(1.075, 1.075, 1.075);
+            transition: opacity 0.8s, transform 1.6s var(--ease-quart);
+
+            &.is-visible {
+                opacity: 1;
+                transform: scale3d(1,1,1);
+            }
+        }
         img {
             display: block;
             width: 100%;