Merge pull request #2556 from exadel-inc/fix/esl-carousel-grid

fix(esl-carousel): fix carousel empty state
exadel-inc · Jul 31, 2024 · 38b3bc7 · 38b3bc7
2 parents 420056d + 8f88589
commit 38b3bc7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/modules/esl-carousel/core/esl-carousel.less b/src/modules/esl-carousel/core/esl-carousel.less
@@ -44,6 +44,14 @@ esl-carousel {
     user-select: none;
     pointer-events: none;
   }
+
+  &[empty] {
+    --esl-carousel-side-space: 0;
+
+    [esl-carousel-slides] {
+      display: none;
+    }
+  }
 }
 
 /* Default carousel area styles */

diff --git a/src/modules/esl-carousel/renderers/esl-carousel.grid.renderer.ts b/src/modules/esl-carousel/renderers/esl-carousel.grid.renderer.ts
@@ -29,6 +29,7 @@ export class ESLGridCarouselRenderer extends ESLDefaultCarouselRenderer {
 
   /** Count of fake slides to fill the last "row" or incomplete carousel state */
   public get fakeSlidesCount(): number {
+    if (this.$carousel.$slides.length === 0) return 0;
     if (this.$carousel.$slides.length < this.count) {
       return this.count - this.$carousel.$slides.length;
     }