From 454a4c3a46110af0e72aa276eaf494650ef4d6fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikul=C3=A1=C5=A1=20z=20Neoloop?=
 <mikeenachtigall@gmail.com>
Date: Thu, 27 Jun 2024 02:50:46 +0200
Subject: [PATCH 1/2] Resolves #145: add particle offset (gapSize)

---
 src/components/Carousel/Carousel.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index b7850d2..9478188 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -138,6 +138,14 @@
     data.particlesToScrollInit = particlesToScroll
   }
 
+  /**
+   * Size of gap between particles in px (pixels)
+   */
+  export let gapSize = 0
+  $: {
+    data.gapSize = gapSize
+  }
+
   export async function goTo(pageIndex, options) {
     const animated = get(options, 'animated', true)
     if (typeof pageIndex !== 'number') {
@@ -163,12 +171,12 @@
   const pageWindowElementResizeObserver = createResizeObserver(({
     width,
   }) => {
-    pageWindowWidth = width
+    pageWindowWidth = width + data.gapSize
     data.particleWidth = pageWindowWidth / data.particlesToShow
 
     applyParticleSizes({
       particlesContainerChildren: particlesContainer.children,
-      particleWidth: data.particleWidth,
+      particleWidth: data.particleWidth - data.gapSize,
     })
     methods.offsetPage({ animated: false })
   })
@@ -286,6 +294,7 @@
         on:swipeFailed={handleSwipeFailed}
         on:swipeThresholdReached={handleSwipeThresholdReached}
         style="
+          gap: {gapSize}px;
           transform: translateX({offset}px);
           transition-duration: {durationMs}ms;
           transition-timing-function: {timingFunction};

From 76bf64c8ba476480f890ce26be7ea472279a1bb8 Mon Sep 17 00:00:00 2001
From: Mikee <mikeenachtigall@gmail.com>
Date: Wed, 15 Jan 2025 18:02:20 +0100
Subject: [PATCH 2/2] fix: update Carousel.svelte resize observer

---
 src/components/Carousel/Carousel.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index b7850d2..31c033c 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -159,10 +159,9 @@
   let pageWindowWidth = 0
   let pageWindowElement
   let particlesContainer
+  let pageWindowElementResizeObserver
 
-  const pageWindowElementResizeObserver = createResizeObserver(({
-    width,
-  }) => {
+  const pageWindowElementResizeObserverHandler = ({ width }) => {
     pageWindowWidth = width
     data.particleWidth = pageWindowWidth / data.particlesToShow
 
@@ -171,7 +170,7 @@
       particleWidth: data.particleWidth,
     })
     methods.offsetPage({ animated: false })
-  })
+  }
 
   function addClones() {
     const {
@@ -191,6 +190,7 @@
 
   onMount(() => {
     (async () => {
+      pageWindowElementResizeObserver = createResizeObserver(pageWindowElementResizeObserverHandler)
       await tick()
       if (particlesContainer && pageWindowElement) {
         data.particlesCountWithoutClones = particlesContainer.children.length
@@ -209,7 +209,9 @@
   })
 
   onDestroy(() => {
-    pageWindowElementResizeObserver.disconnect()
+    if (pageWindowElementResizeObserver) {
+      pageWindowElementResizeObserver.disconnect()
+    }
     progressManager.reset()
   })