Merge pull request #2224 from exadel-inc/feat/esl-carousel-rework

feat(esl-carousel-rework): fix jumping during commit animation & fix the final position of the slide

Author: ala-n

src/modules/esl-carousel/renderers/multi/esl-multi-carousel.ts

@@ -160,20 +160,16 @@ export class ESLMultiCarouselRenderer extends ESLCarouselRenderer {
       const slideSize = this.slideSize + this.gap;
       // calculate offset to move to
       const shiftCount = Math.abs(offset) % slideSize >= slideSize / 4 ? 1 : 0;
-      const stageOffset = offset < 0 ? -shiftCount * slideSize : (shiftCount - 1) * slideSize - this.gap;
+      const stageOffset = offset < 0 ? -shiftCount * slideSize : (shiftCount - 1) * slideSize;
 
       this.$carousel.toggleAttribute('animating', true);
       this.setTransformOffset(stageOffset);
       await promisifyEvent(this.$area, 'transitionend').catch(resolvePromise);
     }
 
-    // clear animation
-    this.$carousel.toggleAttribute('animating', false);
-    this.setTransformOffset(0);
-    this.$slides.forEach((el) => el.toggleAttribute('visible', false));
-
     const sign = offset < 0 ? 1 : -1;
-    const count = Math.abs(offset) % this.slideSize >= this.slideSize / 4 ?
+    const slideSize = this.slideSize + this.gap;
+    const count = Math.abs(offset) % slideSize >= slideSize / 4 ?
       Math.ceil(Math.abs(offset) / this.slideSize) : Math.floor(Math.abs(offset) / this.slideSize);
     const nextIndex = this.$carousel.activeIndex + count * sign;
 
@@ -189,6 +185,11 @@ export class ESLMultiCarouselRenderer extends ESLCarouselRenderer {
 
     this.setActive(this.currentIndex);
 
+    // clear animation
+    this.$carousel.toggleAttribute('animating', false);
+    this.setTransformOffset(0);
+    this.$slides.forEach((el) => el.toggleAttribute('visible', false));
+
     if (activeIndex !== this.currentIndex) {
       this.$carousel.dispatchEvent(ESLCarouselSlideEvent.create('AFTER', {
         direction,