Add carousel component

Author: MrWillCom

.changeset/shaky-phones-learn.md

@@ -0,0 +1,5 @@
+---
+'hexo-theme-cupertino': minor
+---
+
+Add carousel component.

_config.yml

@@ -163,6 +163,7 @@ builtin_components:
   button: true
   badge: true
   utilities: true
+  carousel: true
 
 # smooth scroll powered by [darkroomengineering/lenis](https://github.com/darkroomengineering/lenis)
 smooth_scroll: true

source/css/components/carousel.scss

@@ -0,0 +1,23 @@
+.carousel {
+  max-width: 100%;
+  overflow-x: scroll;
+  display: flex;
+  gap: 12px;
+  $paddingX: max(calc((100% - 800px) / 2), 16px);
+  padding-left: $paddingX;
+  padding-right: $paddingX;
+
+  .carousel-item {
+    width: auto;
+    height: 320px;
+    max-height: 80svh;
+    margin: 0;
+    padding: 0;
+    border-radius: var(--radius-medium);
+  }
+
+  & > figure {
+    margin: 0;
+    padding: 0 !important;
+  }
+}