Add base animation

src/CarouselChild.svelte

@@ -1,5 +1,7 @@
 <script>
   import { onMount } from 'svelte'
+  import { fly } from 'svelte/transition';
+
   import { generateId } from './utils/id'
   import { store } from './store'
 
@@ -10,10 +12,17 @@
 </script>
 
 {#if id === $store.currentItemId}
+<div
+  class="main-container"
+  in:fly="{{ x: 200, duration: 200, delay: 200 }}"
+  out:fly="{{ x: -200, duration: 200 }}"
+>
   <slot></slot>
+</div>
 {/if }
 
 <style>
   .main-container {
+    width: 100%;
   }
 </style>

src/stories/ImageCarouselView.svelte

@@ -11,10 +11,14 @@
 <div class="main-container">
   <ImageCarousel {arrows}>
     <CarouselChild>
+      <div class="child-content-container">
         <h1>Element 1</h1>
+      </div>
     </CarouselChild>
     <CarouselChild>
+      <div class="child-content-container">
         <h1>Element 2</h1>
+      </div>
     </CarouselChild>
   </ImageCarousel>
 </div>
@@ -24,4 +28,10 @@
     display: flex;
     width: 100%;
   }
+  .child-content-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>