From 5d415d6229e072470bac860268f37b1ca60f8a53 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 21 Jan 2021 20:22:57 +0300
Subject: [PATCH] Add autoplay

---
 src/ImageCarousel.svelte             | 35 ++++++++++++++++++++++++----
 src/stories/ImageCarouselView.svelte | 14 ++++++++++-
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel.svelte
index 27889af..479488c 100644
--- a/src/ImageCarousel.svelte
+++ b/src/ImageCarousel.svelte
@@ -36,6 +36,16 @@
    */
   export let speed = 500
 
+  /**
+   * Enables auto play of slides
+   */
+  export let autoplay = false
+
+  /**
+   * Auto play change interval
+   */
+  export let autoplaySpeed = 3000
+
   let pagesCount = 0
   let contentContainerWidth = 0
   let offset
@@ -59,14 +69,31 @@
     }
     moveToPage(initialPage)
   }
+
+  function applyAutoplay() {
+    let interval
+    if (autoplay) {
+      interval = setInterval(() => {
+        showNextPage()
+      }, autoplaySpeed)
+    }
+    return {
+      teardownAutoplay: () => {
+        interval && clearInterval(interval)
+      }
+    }
+  }
   
   onMount(() => {
     store.reset() // to init after hot reload
     applySlideSizes()
 
+    const { teardownAutoplay } = applyAutoplay()
+
     window.addEventListener('resize', applySlideSizes)
     return () => {
       window.removeEventListener('resize', applySlideSizes)
+      teardownAutoplay()
     }
   })
 
@@ -79,11 +106,11 @@
     offset = -$store.currentItemIndex * contentContainerWidth
   }
 
-  function handlePrevClick() {
+  function showPrevPage() {
     store.prev({ infinite, pagesCount })
     applyOffset()
   }
-  function handleNextClick() {
+  function showNextPage() {
     store.next({ infinite, pagesCount })
     applyOffset()
   }
@@ -94,7 +121,7 @@
   <div class="side-container">
     <span
       class="clickable"
-      on:click={handlePrevClick}
+      on:click={showPrevPage}
     >&lt;</span>
   </div>
   {/if}
@@ -116,7 +143,7 @@
   <div class="side-container">
     <span
       class="clickable"
-      on:click={handleNextClick}
+      on:click={showNextPage}
     >&gt;</span>
   </div>
   {/if}
diff --git a/src/stories/ImageCarouselView.svelte b/src/stories/ImageCarouselView.svelte
index 5de8fdd..7449d36 100644
--- a/src/stories/ImageCarouselView.svelte
+++ b/src/stories/ImageCarouselView.svelte
@@ -24,7 +24,17 @@
   /**
    * Transition speed (ms)
    */
-   export let speed = 500
+  export let speed = 500
+
+  /**
+   * Enables auto play of slides
+   */
+  export let autoplay = false
+
+  /**
+   * Auto play change interval
+   */
+  export let autoplaySpeed = 3000
 
   const colors = [
     '#e5f9f0',
@@ -47,6 +57,8 @@
     {slidesToShow}
     {initialPage}
     {speed}
+    {autoplay}
+    {autoplaySpeed}
   >
     {#each colors as color (color)}
       <div