feat: multi-image uploads

src/lib/components/Carousel.svelte

@@ -12,13 +12,20 @@
     let carousel = $state<HTMLDivElement>();
     let scrollPosition = $state(0);
     let scrollWidth = $state(0);
-    let clientWidth = $state(0);
+    let clientWidth = $state(1);
     function updateScroll() {
         scrollPosition = carousel?.scrollLeft || 0;
         scrollWidth = carousel?.scrollWidth || 0;
-        clientWidth = carousel?.clientWidth || 0;
+        clientWidth = carousel?.clientWidth || 1;
     }
-    onMount(updateScroll);
+    onMount(() => {
+        const id = setInterval(() => {
+            if (carousel) {
+                updateScroll();
+            }
+        }, 1000);
+        return () => clearInterval(id);
+    });
 </script>
 
 <div class="controls">
@@ -37,7 +44,8 @@
     {#if scrollPosition > clientWidth / 2}
         <button
             class="arrow left"
-            onclick={() => {
+            onclick={(e) => {
+                e.preventDefault();
                 if (carousel) carousel.scrollLeft -= carousel.clientWidth;
             }}
         >
@@ -47,7 +55,8 @@
     {#if scrollPosition < scrollWidth - clientWidth * 1.5}
         <button
             class="arrow right"
-            onclick={() => {
+            onclick={(e) => {
+                e.preventDefault();
                 if (carousel) carousel.scrollLeft += carousel.clientWidth;
             }}
         >
@@ -95,12 +104,14 @@
         background-color: rgba(0, 0, 0, 0.5);
         border-radius: 9999px;
     }
-    .arrow {
+    .arrow,
+    .delete {
         cursor: pointer;
         width: 2rem;
         aspect-ratio: 1 / 1;
     }
-    .arrow img {
+    .arrow img,
+    .delete img {
         width: 1.4rem;
     }
     .arrow:hover {
@@ -120,14 +131,14 @@
         transform: translateY(-50%);
     }
     .delete {
-        top: 0.1rem;
-        right: 0.1rem;
+        top: 0.4rem;
+        right: 0.2rem;
     }
     .position {
         font-size: 0.8rem;
-        bottom: 0.7rem;
+        top: 0.4rem;
         border-radius: 1rem;
-        right: 0.2rem;
+        left: 0.2rem;
         padding: 0.3rem 0.5rem;
         background-color: rgba(0, 0, 0, 0.7);
     }