diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index b7850d2..7835c4d 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') { @@ -159,19 +167,18 @@ let pageWindowWidth = 0 let pageWindowElement let particlesContainer + let pageWindowElementResizeObserver - const pageWindowElementResizeObserver = createResizeObserver(({ - width, - }) => { - pageWindowWidth = width +const pageWindowElementResizeObserverHandler = ({ 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 }) - }) + } function addClones() { const { @@ -191,6 +198,7 @@ onMount(() => { (async () => { + pageWindowElementResizeObserver = createResizeObserver(pageWindowElementResizeObserverHandler) await tick() if (particlesContainer && pageWindowElement) { data.particlesCountWithoutClones = particlesContainer.children.length @@ -209,7 +217,9 @@ }) onDestroy(() => { - pageWindowElementResizeObserver.disconnect() + if (pageWindowElementResizeObserver) { + pageWindowElementResizeObserver.disconnect() + } progressManager.reset() }) @@ -286,6 +296,7 @@ on:swipeFailed={handleSwipeFailed} on:swipeThresholdReached={handleSwipeThresholdReached} style=" + gap: {gapSize}px; transform: translateX({offset}px); transition-duration: {durationMs}ms; transition-timing-function: {timingFunction};