Merge pull request #144 from ZIA-Hans/feat/slide-gap-use-margin

feat(carousel): slide item's gap use margin to complete
FriedRiceNoodles · May 28, 2024 · a92e12c · a92e12c
2 parents e25fc00 + 6800fbf
commit a92e12c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/fifty-paws-play.md b/.changeset/fifty-paws-play.md
@@ -0,0 +1,6 @@
+---
+'@banana-ui/banana': patch
+'@banana-ui/react': patch
+---
+
+slide item's gap use margin to complete
diff --git a/packages/banana/src/carousel/index.styles.ts b/packages/banana/src/carousel/index.styles.ts
@@ -34,7 +34,6 @@ export default [
       transition: transform var(--banana-carousel-transition-duration, ${unsafeCSS(Var.TransitionNormal)});
       /* This variable should not be used directly, use the gap property instead */
       /* DO NOT PUT IT IN THE DOCUMENTATION */
-      gap: calc(var(--banana-carousel-gap, 0) * 1px);
     }
     .slides-wrapper--vertical {
       flex-direction: column;
@@ -55,6 +54,7 @@ export default [
       height: 100%;
       flex-grow: 0;
       flex-shrink: 0;
+      margin-right: calc(var(--banana-carousel-gap, 0) * 1px);
     }
 
     .slides-wrapper--vertical ::slotted(*) {
@@ -67,6 +67,7 @@ export default [
       width: 100%;
       flex-grow: 0;
       flex-shrink: 0;
+      margin-bottom: calc(var(--banana-carousel-gap, 0) * 1px);
     }
 
     .navigation-buttons {

diff --git a/packages/banana/src/carousel/index.ts b/packages/banana/src/carousel/index.ts
@@ -492,6 +492,19 @@ export default class BCarousel extends LitElement {
     this.requestUpdate();
     await this.updateComplete;
     this.calcHeight();
+    this._calcLastSlideGap();
+  }
+
+  private _calcLastSlideGap() {
+    if (this._loop) {
+      this.vertical
+        ? (this._slidesWithCopys[this._slidesWithCopys.length - 1].style.marginBottom = '0px')
+        : (this._slidesWithCopys[this._slidesWithCopys.length - 1].style.marginRight = '0px');
+    } else {
+      this.vertical
+        ? (this._slides[this._slides.length - 1].style.marginBottom = '0px')
+        : (this._slides[this._slides.length - 1].style.marginRight = '0px');
+    }
   }
 
   render() {