#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) {
@@ -316,7 +315,12 @@
         bind:this={pagesElement}
       >
         <slot {loaded}></slot>
-      </div>    
+      </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
-    class="sc-carousel-progress__indicator"
-    style="
-      width: {width}%;
-    "
-  ></div>
-</div>
+<div
+  class="sc-carousel-progress__indicator"
+  style="
+    width: {width}%;
+  "
+></div>
 
 <style>
-  .sc-carousel-progress__container {
-    width: 100%;
-    height: 20px;
-    background-color: lightgray;
-  }
   .sc-carousel-progress__indicator {
     height: 100%;
     background-color: gray;