From fa7020ed6b95071930e3fc861d1521a557820b05 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 19:16:23 +0300
Subject: [PATCH] Move jumping to real page to separate fn

---
 src/components/Carousel/Carousel.svelte | 21 +++++++++++++++++++--
 src/components/Dots/Dots.svelte         |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 9afd137..6aa01b1 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -183,15 +183,25 @@
   }
 
   function offsetPage(animated) {
+    // _duration is an offset animation time
     _duration = animated ? duration : 0
     offset = -currentPageIndex * pageWidth
+  }
+
+  // makes delayed jump to 1st or last element
+  function jumpIfNeeded() {
+    let jumped = false
     if (infinite) {
       if (currentPageIndex === 0) {
-        showPage(pagesCount - 2, { offsetDelayMs: duration, animated: false })
+        // offsetDelayMs should depend on _duration, as it wait when offset finishes
+        showPage(pagesCount - 2, { offsetDelayMs: _duration, animated: false })
+        jumped = true
       } else if (currentPageIndex === pagesCount - 1) {
-        showPage(1, { offsetDelayMs: duration, animated: false })
+        showPage(1, { offsetDelayMs: _duration, animated: false })
+        jumped = true
       }
     }
+    return jumped
   }
 
   // Disable page change while animation is in progress
@@ -211,8 +221,11 @@
     const offsetDelayMs = get(options, 'offsetDelayMs', true)
     safeChangePage(() => {
       store.moveToPage({ pageIndex, pagesCount })
+      // delayed page transition, used for infinite autoplay to jump to real page
       setTimeout(() => {
         offsetPage(animated)
+        const jumped = jumpIfNeeded()
+        !jumped && applyAutoplay()
       }, offsetDelayMs)
     }, { animated })
   }
@@ -221,6 +234,8 @@
     safeChangePage(() => {
       store.prev({ infinite, pagesCount })
       offsetPage(animated)
+      const jumped = jumpIfNeeded()
+      !jumped && applyAutoplay()
     }, { animated })
   }
   function showNextPage(options) {
@@ -228,6 +243,8 @@
     safeChangePage(() => {
       store.next({ infinite, pagesCount })
       offsetPage(animated)
+      const jumped = jumpIfNeeded()
+      !jumped && applyAutoplay()
     }, { animated })
   }
 
diff --git a/src/components/Dots/Dots.svelte b/src/components/Dots/Dots.svelte
index 2524d38..c9374b7 100644
--- a/src/components/Dots/Dots.svelte
+++ b/src/components/Dots/Dots.svelte
@@ -43,7 +43,7 @@
   }
   .sc-carousel-dots__dot-container {
     height: calc(var(--sc-dot-size) + 10px);
-    width: calc(var(--sc-dot-size) + 10px);
+    width: calc(var(--sc-dot-size) + 6px);
     display: flex;
     align-items: center;
     justify-content: center;