@syncfusion/ej2-navigations 20.1.51 → 20.1.55

package/dist/es6/ej2-navigations.es5.js

@@ -16304,6 +16304,7 @@ var CLS_HOVER = 'e-carousel-hover';
 var CLS_TEMPLATE$2 = 'e-template';
 var CLS_SLIDE_ANIMATION = 'e-carousel-slide-animation';
 var CLS_FADE_ANIMATION = 'e-carousel-fade-animation';
+var CLS_CUSTOM_ANIMATION = 'e-carousel-custom-animation';
 var CLS_PREV_SLIDE = 'e-prev';
 var CLS_NEXT_SLIDE = 'e-next';
 var CLS_TRANSITION_START = 'e-transition-start';
@@ -16682,13 +16683,12 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     };
     Carousel.prototype.applyAnimation = function () {
         var animationTarget = this.element.querySelector("." + CLS_ITEMS$2);
-        removeClass([animationTarget], [CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION]);
+        removeClass([animationTarget], [CLS_CUSTOM_ANIMATION, CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION]);
         if (this.animation.customEffect) {
-            addClass([animationTarget], this.animation.customEffect);
+            addClass([animationTarget], [CLS_CUSTOM_ANIMATION, this.animation.customEffect]);
         }
         else if (this.animation.effect !== 'None') {
-            var animationClass = this.animation.effect === 'Fade' ? CLS_FADE_ANIMATION : CLS_SLIDE_ANIMATION;
-            addClass([animationTarget], animationClass);
+            addClass([animationTarget], this.animation.effect === 'Fade' ? CLS_FADE_ANIMATION : CLS_SLIDE_ANIMATION);
         }
     };
     Carousel.prototype.autoSlide = function () {
@@ -16795,8 +16795,15 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                 isSwiped: isSwiped
             };
             var slideHeight;
-            if (_this.animation.effect === 'None' || _this.animation.customEffect) {
-                _this.onTransitionEnd();
+            if (_this.animation.customEffect) {
+                if (direction === 'Previous') {
+                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
+                    addClass([args.currentSlide], CLS_PREV_SLIDE);
+                }
+                else {
+                    addClass([args.currentSlide], CLS_PREV_SLIDE);
+                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
+                }
             }
             else if (_this.animation.effect === 'Slide') {
                 if (direction === 'Previous') {
@@ -16815,6 +16822,9 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
                 removeClass([args.currentSlide], CLS_ACTIVE$2);
                 addClass([args.nextSlide], CLS_ACTIVE$2);
             }
+            else {
+                _this.onTransitionEnd();
+            }
             _this.handleNavigatorsActions(currentIndex);
         });
     };
@@ -17041,6 +17051,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
     Carousel.prototype.wireEvents = function () {
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
         EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
+        EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);
         EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);
     };
     Carousel.prototype.unWireEvents = function () {
@@ -17057,6 +17068,7 @@ var Carousel = /** @__PURE__ @class */ (function (_super) {
         if (playIcon) {
             EventHandler.remove(playIcon, 'click', this.playButtonClickHandler);
         }
+        EventHandler.remove(this.element.firstElementChild, 'animationend', this.onTransitionEnd);
         EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
         EventHandler.clearEvents(this.element);
     };