Merge pull request #2523 from exadel-inc/feat/centered-carousel

feat(esl-carousel): add centered renderer

site/views/examples/carousel/centered-siblings.sample.njk

@@ -0,0 +1,35 @@
+---
+title: Centered Carousel
+order: 6
+tags: carousel-sample
+---
+<div class="esl-carousel-nav-container">
+  <button class="esl-carousel-arrow inner prev hide-xs" esl-carousel-nav="group:prev">
+    <span class="sr-only">Previous Slide</span>
+  </button>
+
+  <esl-carousel demo-options-target
+                style="padding-inline: 60px; margin-inline: 0;"
+                esl-carousel-touch
+                type="centered"
+                media="all|@+MD"
+                count="1|2"
+                loop="true">
+    <ul esl-carousel-slides>
+      {% for i in range(0, 6) -%}
+        <li esl-carousel-slide style="max-width: 400px">
+          <div class="card">
+            <esl-image mode="cover" lazy
+                       data-alt="Alt Text Test"
+                       data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+          </div>
+        </li>
+      {%- endfor %}
+    </ul>
+  </esl-carousel>
+
+  <button class="esl-carousel-arrow inner next hide-xs" esl-carousel-nav="group:next">
+    <span class="sr-only">Next Slide</span>
+  </button>
+</div>
+<esl-carousel-dots class="carousel-dots-wrapper" target="::prev::child(esl-carousel)"></esl-carousel-dots>

src/modules/esl-carousel/core.ts

@@ -26,3 +26,4 @@ export * from './plugin/wheel/esl-carousel.wheel.mixin';
 import './renderers/esl-carousel.none.renderer';
 import './renderers/esl-carousel.default.renderer';
 import './renderers/esl-carousel.grid.renderer';
+import './renderers/esl-carousel.centered.renderer';

src/modules/esl-carousel/core/esl-carousel.less

@@ -30,7 +30,7 @@ esl-carousel {
     cursor: grabbing;
   }
 
-  &[animating] {
+  &[animating]:not(#specific) {
     padding-inline: 0;
     margin-inline: 0;
   }

src/modules/esl-carousel/renderers/esl-carousel.centered.renderer.ts

@@ -0,0 +1,37 @@
+import {ESLCarouselRenderer} from '../core/esl-carousel.renderer';
+import {ESLDefaultCarouselRenderer} from './esl-carousel.default.renderer';
+import {normalize} from '../core/nav/esl-carousel.nav.utils';
+
+@ESLCarouselRenderer.register
+export class ESLCenteredCarouselRenderer extends ESLDefaultCarouselRenderer {
+  public static override is = 'centered';
+  public static override classes: string[] = ['esl-carousel-centered-renderer', 'esl-carousel-default-renderer'];
+
+  /** @returns size of all active slides */
+  public get activeSlidesSize(): number {
+    let width = (this.count - 1) * this.gap;
+    for (let i = 0; i < this.count; i++) {
+      const position = normalize(i + this.currentIndex, this.size);
+      const $slide = this.$slides[position];
+      width += this.vertical ? $slide.offsetHeight : $slide.offsetWidth;
+    }
+    return width;
+  }
+
+  /** @returns carousel size */
+  public get carouselSize(): number {
+    return this.vertical ? this.$carousel.clientHeight : this.$carousel.clientWidth;
+  }
+
+  /** @returns carousel padding value */
+  public get carouselPadding(): number {
+    const carouselStyles = getComputedStyle(this.$carousel);
+    return parseFloat(carouselStyles[this.vertical ? 'paddingTop' : 'paddingLeft']);
+  }
+
+  /** @returns slide offset by the slide index */
+  protected override getOffset(index: number): number {
+    const offset = super.getOffset(index);
+    return offset - (this.carouselSize - this.activeSlidesSize) / 2 + this.carouselPadding;
+  }
+}