Fix shared store

src/components/Carousel/Carousel.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { onDestroy, onMount, tick } from 'svelte'
+  import { onMount, tick } from 'svelte'
-  import { store } from '../../store'
+  import { createStore } from '../../store'
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
   import { NEXT, PREV } from '../../direction'
@@ -56,6 +56,7 @@
    */
   export let dots = true
 
+  let store = createStore()
   let currentPageIndex = 0
   $: originalCurrentPageIndex = currentPageIndex - Number(infinite);
   let pagesCount = 0
@@ -65,10 +66,6 @@
   let pageWindowElement
   let pagesElement
 
-  const unsubscribe = store.subscribe(value => {
-    currentPageIndex = value.currentPageIndex
-  })
-
   function applyPageSizes() {
     const children = pagesElement.children
     pageWidth = pageWindowElement.clientWidth
@@ -107,6 +104,9 @@
 
   onMount(async () => {
     await tick()
+    const unsubscribe = store.subscribe(value => {
+      currentPageIndex = value.currentPageIndex
+    })
     if (pagesElement && pageWindowElement) {
       infinite && addClones()
       applyPageSizes()
@@ -118,13 +118,10 @@
     return () => {
       removeResizeEventListener(applyPageSizes)
       teardownAutoplay()
+      unsubscribe()
     }
   })
 
-  onDestroy(() => {
-    unsubscribe()
-  })
-
   function handlePageChange(event) {
     showPage(event.detail + Number(infinite), { offsetDelay: 0, animated: true })
   }

src/components/Carousel/CarouselView.svelte

@@ -54,6 +54,12 @@
     { color: '#19c97d', text: '8' },
     { color: '#00c36f', text: '9' }
   ]
+
+  const colors2 = [
+    { color: '#e5f9f0', text: '0' },
+    { color: '#ccf3e2', text: '1' },
+    { color: '#b2edd3', text: '2' }
+  ]
 </script>
 
 <div class="main-container">
@@ -76,11 +82,32 @@
       </div>
     {/each}
   </Carousel>
+
+  <Carousel
+    {arrows}
+    {infinite}
+    {initialPageIndex}
+    {speed}
+    {autoplay}
+    {autoplaySpeed}
+    {autoplayDirection}
+    {dots}
+  >
+    {#each colors2 as { color, text } (color)}
+      <div
+        class="color-container"
+        style="background-color: {color};"
+      >
+        <p>{text}</p>
+      </div>
+    {/each}
+  </Carousel>
 </div>
 
 <style>
   .main-container {
     display: flex;
+    flex-direction: column;
     width: 100%;
   }
   .color-container {

src/store.js

@@ -61,4 +61,4 @@ function createStore() {
   };
 }
 
-export const store = createStore();
+export { createStore };