Disable buttons if reached limits but not infinite

src/Arrow/Arrow.svelte

@@ -4,10 +4,16 @@
    * Indicates direction of the arrow ('next', 'prev')
    */
   export let direction = NEXT
+
+  /**
+   * Indicates if button disabled
+   */
+  export let disabled = false
 </script>
 
 <div
   class="circle"
+  class:disabled
   on:click
 >
   <i
@@ -49,4 +55,8 @@
     transform: rotate(135deg);
     right: calc(var(--size) / -2);
   }
+  .disabled,
+  .disabled:hover {
+    opacity: 0.5;
+  }
 </style>

src/Carousel/Carousel.svelte

@@ -173,7 +173,11 @@
     {#if arrows}
       <slot name="prev" {showPrevPage}>
         <div class="arrow-container">
-          <Arrow direction="prev" on:click={showPrevPage} />
+          <Arrow
+            direction="prev"
+            disabled={!infinite && originalCurrentPageIndex === 0}
+            on:click={showPrevPage}
+          />
         </div>
       </slot>
     {/if}
@@ -199,7 +203,11 @@
     {#if arrows}
       <slot name="next" {showNextPage}>
         <div class="arrow-container">
-          <Arrow direction="next" on:click={showNextPage} />
+          <Arrow
+            direction="next"
+            disabled={!infinite && originalCurrentPageIndex === originalPagesCount - 1}
+            on:click={showNextPage}
+          />
         </div>
       </slot>
     {/if}