#31 : Update progress position

src/components/Carousel/Carousel.svelte

@@ -268,7 +268,6 @@
     _duration = 0
   }
   function handleThreshold(event) {
-    // TODO: is it correct?
     directionFnDescription[event.detail.direction]()
   }
   function handleSwipeMove(event) {
@@ -317,6 +316,11 @@
       >
         <slot {loaded}></slot>
       </div>
+      {#if autoplayProgressVisible}
+        <div class="sc-carousel-progress__container">
+          <Progress value={progressValue} />
+        </div>
+      {/if}
     </div>
     {#if arrows}
       <slot name="next" {showNextPage}>
@@ -344,8 +348,6 @@
       ></Dots>
     </slot>
   {/if}
-  {progressValue}
-  <Progress value={progressValue} />
 </div>
 
 <style>
@@ -365,6 +367,7 @@
     display: flex;
     overflow: hidden;
     box-sizing: border-box;
+    position: relative;
   }
   .sc-carousel__pages-container {
     width: 100%;
@@ -378,4 +381,11 @@
     align-items: center;
     justify-content: center;
   }
+  .sc-carousel-progress__container {
+    width: 100%;
+    height: 7px;
+    background-color: lightgray;
+    position: absolute;
+    bottom: 0;
+  }
 </style>

src/components/Progress/Progress.svelte

@@ -12,21 +12,14 @@
   $: width = Math.min(value * MAX_PERCENT, MAX_PERCENT)
 </script>
 
-<div class="sc-carousel-progress__container">
+<div
-  <div
   class="sc-carousel-progress__indicator"
   style="
     width: {width}%;
   "
-  ></div>
+></div>
-</div>
 
 <style>
-  .sc-carousel-progress__container {
-    width: 100%;
-    height: 20px;
-    background-color: lightgray;
-  }
   .sc-carousel-progress__indicator {
     height: 100%;
     background-color: gray;