feat(carousel): implement circular layout and enhance navigation logic

src/app/shared/components/carousel/carousel.component.scss

@@ -13,7 +13,6 @@
   }
 
   &__viewport {
-    display: flex;
     width: 100%;
     overflow-x: auto;
     overscroll-behavior-inline: contain;
@@ -29,6 +28,39 @@
       outline: 2px solid var(--color-primary, currentColor);
       outline-offset: 2px;
     }
+
+    &--circular {
+      overflow: hidden;
+      scroll-snap-type: none;
+    }
+  }
+
+  &__linear-track,
+  &__page {
+    display: flex;
+  }
+
+  &__track {
+    display: flex;
+    width: 300%;
+    transform: translateX(calc(-100% / 3));
+
+    &--moving {
+      transition: transform 300ms ease;
+    }
+
+    &--previous {
+      transform: translateX(0);
+    }
+
+    &--next {
+      transform: translateX(calc(-200% / 3));
+    }
+  }
+
+  &__page {
+    flex: 0 0 calc(100% / 3);
+    min-width: 0;
   }
 
   &__item {
@@ -77,4 +109,8 @@
   .carousel__viewport {
     scroll-behavior: auto;
   }
+
+  .carousel__track--moving {
+    transition-duration: 1ms;
+  }
 }