angular-jk-carousel - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/jk-carousel.js

@@ -12,3 +12,3 @@ (function() {
 
-  function CarouselController($timeout, $attrs) {
+  function CarouselController($timeout, $attrs, $interval) {
 
@@ -19,6 +19,13 @@ var that = this;
     that.radioButtonIndex = 0;
-    $attrs.$observe('data', function() {
-      that.onDataChange();
-    });
+    that.transitionsTime = 500;
+    that.transitionsEnabled = true;
 
+    if (that.autoSlide === undefined) {
+      that.autoSlide = false;
+    }
+
+    if (that.autoSlideTime === undefined) {
+      that.autoSlideTime = 5000;
+    }
+
     that.registerElement = function(element) {
@@ -29,3 +36,33 @@ that.element = element;
 
-    that.resetSlidesContainerToDefaultPosition = function() {
+    $attrs.$observe('data', function() {
+      that.onDataChange();
+    });
+
+    $attrs.$observe('autoSlide', function() {
+      that.autoSlide = that.autoSlide === 'true';
+      that.validateAutoSlide();
+    });
+
+    $attrs.$observe('autoSlideTime', function() {
+      that.autoSlideTime = parseInt(that.autoSlideTime);
+      that.restartAutoSlide();
+    });
+
+    that.onDataChange = function() {
+      if (that.isDataInvalidOrTooSmall()) {
+        return;
+      }
+      that.executeCloneData();
+      $timeout(function() {
+        that.updateSlidesContainerWidth();
+        that.restartFromFirstItem();
+      });
+    };
+
+    that.updateSlidesContainerWidth = function() {
+      that.elementWidth = that.element.prop('offsetWidth');
+      that.slidesContainer.css('width', (that.elementWidth * that.cloneData.length) + 'px');
+    };
+
+    that.restartFromFirstItem = function() {
       if (!that.elementWidth) {
@@ -42,13 +79,2 @@ return;
 
-    that.onDataChange = function() {
-      if (that.isDataInvalidOrTooSmall()) {
-        return;
-      }
-      that.executeCloneData();
-      $timeout(function() {
-        that.updateSlidesContainerWidth();
-        that.resetSlidesContainerToDefaultPosition();
-      });
-    };
-
     that.executeCloneData = function() {
@@ -77,7 +103,45 @@ var cloneArray = [];
 
-    that.updateSlidesContainerWidth = function() {
-      that.elementWidth = that.element.prop('offsetWidth');
-      that.slidesContainer.css('width', (that.elementWidth * that.cloneData.length) + 'px');
+    that.validateAutoSlide = function() {
+      if (!that.autoSlide) {
+        that.stopAutoSlide();
+      } else {
+        that.startAutoSlide();
+      }
     };
 
+    that.restartAutoSlide = function() {
+      if (!that.autoSlide) {
+        return;
+      }
+      if (that.transitionsEnabled) {
+        $timeout(function() {
+          that.stopAutoSlide();
+          that.startAutoSlide();
+        }, that.transitionsTime);
+      } else {
+        that.stopAutoSlide();
+        that.startAutoSlide();
+      }
+    };
+
+    that.startAutoSlide = function() {
+      if (!angular.isDefined(that.autoSlideInterval)) {
+        that.autoSlideInterval = $interval(function() {
+          that.navigateRight();
+        }, that.autoSlideTime);
+      }
+    };
+
+    that.stopAutoSlide = function() {
+      if (angular.isDefined(that.autoSlideInterval)) {
+        $interval.cancel(that.autoSlideInterval);
+        that.autoSlideInterval = undefined;
+      }
+    };
+
+    that.onNavigateLeft = function() {
+      that.navigateLeft();
+      that.restartAutoSlide();
+    };
+
     that.navigateLeft = function() {
@@ -91,2 +155,3 @@ if (that.isDataInvalidOrTooSmall()) {
       that.applyMarginLeft();
+      that.restartAutoSlide();
       if (that.currentIndex === -1) {
@@ -105,5 +170,10 @@ that.restartFromLastItem();
         that.enableTransitions();
-      }, 500);
+      }, that.transitionsTime);
     };
 
+    that.onNavigateRight = function() {
+      that.navigateRight();
+      that.restartAutoSlide();
+    };
+
     that.navigateRight = function() {
@@ -117,6 +187,7 @@ if (that.isDataInvalidOrTooSmall()) {
       that.applyMarginLeft();
+      that.restartAutoSlide();
       if (that.currentIndex === that.data.length) {
         $timeout(function() {
-          that.resetSlidesContainerToDefaultPosition();
-        }, 500);
+          that.restartFromFirstItem();
+        }, that.transitionsTime);
       }
@@ -131,2 +202,3 @@ };
       that.slidesContainer.css('transition', 'none');
+      that.transitionsEnabled = false;
     };
@@ -137,2 +209,3 @@
         that.slidesContainer.css('transition', 'margin 0.5s ease-in-out');
+        that.transitionsEnabled = true;
       }, 200);
@@ -152,2 +225,3 @@ };
       that.applyMarginLeft();
+      that.restartAutoSlide();
     };
@@ -166,3 +240,3 @@
     .controller('CarouselController', [
-      '$timeout', '$attrs',
+      '$timeout', '$attrs', '$interval',
       CarouselController
@@ -181,2 +255,5 @@ ]);
       ctrl.registerElement(element);
+      scope.$on('$destroy', function() {
+        ctrl.stopAutoSlide();
+      });
     }
@@ -193,3 +270,5 @@
         data: '=',
-        itemTemplateUrl: '='
+        itemTemplateUrl: '=',
+        autoSlide: '@?',
+        autoSlideTime: '@?'
       },
@@ -206,4 +285,4 @@ link: link
 
-} ());
+}());
 
-(function(){angular.module("jkAngularCarousel.templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("carousel-directive.html","<div class=\"jk-carousel\" >\n\n  <div class=\"slides-container\" layout=\"row\" >\n    <div\n      ng-repeat=\"item in ctrl.cloneData\"\n      class=\"slide\"\n    >\n      <div ng-include=\"ctrl.itemTemplateUrl\" ></div>\n    </div>\n  </div>\n  <div class=\"left-arrow-container\" layout=\"column\" layout-align=\"center center\" >\n    <md-button class=\"md-icon-button\" >\n      <md-icon ng-click=\"ctrl.navigateLeft()\" >chevron_left</md-icon>\n    </md-button>\n  </div>\n  <div class=\"right-arrow-container\" layout=\"column\" layout-align=\"center center\" >\n    <md-button class=\"md-icon-button\" >\n      <md-icon ng-click=\"ctrl.navigateRight()\" >chevron_right</md-icon>\n    </md-button>\n  </div>\n\n  <md-radio-group\n    class=\"radio-buttons-container\"\n    layout=\"row\"\n    ng-model=\"ctrl.radioButtonIndex\"\n    layout-align=\"center center\"\n    ng-change=\"ctrl.onRadioButtonClick()\" >\n    <md-radio-button\n      ng-repeat=\"item in ctrl.data\"\n      ng-value=\"$index\"\n      aria-label=\"$index\" >\n    </md-radio-button>\n  </md-radio-group>\n\n</div>\n");}]);})();
+(function(){angular.module("jkAngularCarousel.templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("carousel-directive.html","<div class=\"jk-carousel\" >\n\n  <div class=\"slides-container\" layout=\"row\" >\n    <div\n      ng-repeat=\"slideItem in ctrl.cloneData\"\n      class=\"slide\"\n    >\n      <div ng-include=\"ctrl.itemTemplateUrl\" ></div>\n    </div>\n  </div>\n\n  <md-button class=\"md-icon-button left-arrow-button\" >\n    <md-icon ng-click=\"ctrl.navigateLeft()\" >chevron_left</md-icon>\n  </md-button>\n\n  <md-button class=\"md-icon-button right-arrow-button\" >\n    <md-icon ng-click=\"ctrl.navigateRight()\" >chevron_right</md-icon>\n  </md-button>\n\n  <md-radio-group\n    class=\"radio-buttons-container\"\n    layout=\"row\"\n    ng-model=\"ctrl.radioButtonIndex\"\n    layout-align=\"center center\"\n    ng-change=\"ctrl.onRadioButtonClick()\" >\n    <md-radio-button\n      ng-repeat=\"item in ctrl.data\"\n      ng-value=\"$index\"\n      aria-label=\"$index\" >\n    </md-radio-button>\n  </md-radio-group>\n\n</div>\n");}]);})();

dist/jk-carousel.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";angular.module("jkAngularCarousel",["jkAngularCarousel.templates"])}(),function(){"use strict";function CarouselController($timeout,$attrs){var that=this;that.currentIndex=0,that.currentMarginLeftValue=0,that.radioButtonIndex=0,$attrs.$observe("data",function(){that.onDataChange()}),that.registerElement=function(element){that.element=element,that.slidesContainer=angular.element(that.element.find("div")[0])},that.resetSlidesContainerToDefaultPosition=function(){that.elementWidth&&(that.disableTransitions(),that.currentMarginLeftValue=-1*that.elementWidth,that.applyMarginLeft(),that.currentIndex=0,that.radioButtonIndex=that.currentIndex,that.enableTransitions())},that.onDataChange=function(){that.isDataInvalidOrTooSmall()||(that.executeCloneData(),$timeout(function(){that.updateSlidesContainerWidth(),that.resetSlidesContainerToDefaultPosition()}))},that.executeCloneData=function(){for(var cloneArray=[],index=0;index<that.data.length;index++){var item=that.data[index];cloneArray.push(item)}that.cloneFirstItem(cloneArray),that.cloneLastItem(cloneArray),that.cloneData=cloneArray},that.cloneFirstItem=function(cloneArray){var firstItem=cloneArray[0],firstItemClone=angular.copy(firstItem);cloneArray.push(firstItemClone)},that.cloneLastItem=function(cloneArray){var lastItem=cloneArray[that.data.length-1],lastItemClone=angular.copy(lastItem);cloneArray.unshift(lastItemClone)},that.updateSlidesContainerWidth=function(){that.elementWidth=that.element.prop("offsetWidth"),that.slidesContainer.css("width",that.elementWidth*that.cloneData.length+"px")},that.navigateLeft=function(){that.isDataInvalidOrTooSmall()||(that.currentIndex--,that.radioButtonIndex=that.currentIndex,that.currentMarginLeftValue+=that.elementWidth,that.applyMarginLeft(),-1===that.currentIndex&&that.restartFromLastItem())},that.restartFromLastItem=function(){$timeout(function(){that.disableTransitions(),that.currentMarginLeftValue=that.elementWidth*that.data.length*-1,that.applyMarginLeft(),that.currentIndex=that.data.length-1,that.radioButtonIndex=that.currentIndex,that.enableTransitions()},500)},that.navigateRight=function(){that.isDataInvalidOrTooSmall()||(that.currentIndex++,that.radioButtonIndex=that.currentIndex,that.currentMarginLeftValue-=that.elementWidth,that.applyMarginLeft(),that.currentIndex===that.data.length&&$timeout(function(){that.resetSlidesContainerToDefaultPosition()},500))},that.applyMarginLeft=function(){that.slidesContainer.css("margin-left",that.currentMarginLeftValue+"px")},that.disableTransitions=function(){that.slidesContainer.css("transition","none")},that.enableTransitions=function(){$timeout(function(){that.slidesContainer.css("transition","margin 0.5s ease-in-out")},200)},that.onRadioButtonClick=function(){var multiplier;that.radioButtonIndex>that.currentIndex?(multiplier=that.radioButtonIndex-that.currentIndex,that.currentMarginLeftValue-=that.elementWidth*multiplier):(multiplier=that.currentIndex-that.radioButtonIndex,that.currentMarginLeftValue+=that.elementWidth*multiplier),that.currentIndex=that.radioButtonIndex,that.applyMarginLeft()},that.isDataInvalidOrTooSmall=function(){return that.data&&0!==that.data.length&&1!==that.data.length?!1:!0}}angular.module("jkAngularCarousel").controller("CarouselController",["$timeout","$attrs",CarouselController])}(),function(){"use strict";function CarouselDirective(){function link(scope,element,attrs,ctrl){ctrl.registerElement(element)}return{restrict:"E",replace:!0,templateUrl:"carousel-directive.html",scope:{},controller:"CarouselController",controllerAs:"ctrl",bindToController:{data:"=",itemTemplateUrl:"="},link:link}}angular.module("jkAngularCarousel").directive("jkCarousel",[CarouselDirective])}(),function(){angular.module("jkAngularCarousel.templates",[]).run(["$templateCache",function($templateCache){$templateCache.put("carousel-directive.html",'<div class="jk-carousel" >\n\n  <div class="slides-container" layout="row" >\n    <div\n      ng-repeat="item in ctrl.cloneData"\n      class="slide"\n    >\n      <div ng-include="ctrl.itemTemplateUrl" ></div>\n    </div>\n  </div>\n  <div class="left-arrow-container" layout="column" layout-align="center center" >\n    <md-button class="md-icon-button" >\n      <md-icon ng-click="ctrl.navigateLeft()" >chevron_left</md-icon>\n    </md-button>\n  </div>\n  <div class="right-arrow-container" layout="column" layout-align="center center" >\n    <md-button class="md-icon-button" >\n      <md-icon ng-click="ctrl.navigateRight()" >chevron_right</md-icon>\n    </md-button>\n  </div>\n\n  <md-radio-group\n    class="radio-buttons-container"\n    layout="row"\n    ng-model="ctrl.radioButtonIndex"\n    layout-align="center center"\n    ng-change="ctrl.onRadioButtonClick()" >\n    <md-radio-button\n      ng-repeat="item in ctrl.data"\n      ng-value="$index"\n      aria-label="$index" >\n    </md-radio-button>\n  </md-radio-group>\n\n</div>\n')}])}();
+!function(){"use strict";angular.module("jkAngularCarousel",["jkAngularCarousel.templates"])}(),function(){"use strict";function CarouselController($timeout,$attrs,$interval){var that=this;that.currentIndex=0,that.currentMarginLeftValue=0,that.radioButtonIndex=0,that.transitionsTime=500,that.transitionsEnabled=!0,void 0===that.autoSlide&&(that.autoSlide=!1),void 0===that.autoSlideTime&&(that.autoSlideTime=5e3),that.registerElement=function(element){that.element=element,that.slidesContainer=angular.element(that.element.find("div")[0])},$attrs.$observe("data",function(){that.onDataChange()}),$attrs.$observe("autoSlide",function(){that.autoSlide="true"===that.autoSlide,that.validateAutoSlide()}),$attrs.$observe("autoSlideTime",function(){that.autoSlideTime=parseInt(that.autoSlideTime),that.restartAutoSlide()}),that.onDataChange=function(){that.isDataInvalidOrTooSmall()||(that.executeCloneData(),$timeout(function(){that.updateSlidesContainerWidth(),that.restartFromFirstItem()}))},that.updateSlidesContainerWidth=function(){that.elementWidth=that.element.prop("offsetWidth"),that.slidesContainer.css("width",that.elementWidth*that.cloneData.length+"px")},that.restartFromFirstItem=function(){that.elementWidth&&(that.disableTransitions(),that.currentMarginLeftValue=-1*that.elementWidth,that.applyMarginLeft(),that.currentIndex=0,that.radioButtonIndex=that.currentIndex,that.enableTransitions())},that.executeCloneData=function(){for(var cloneArray=[],index=0;index<that.data.length;index++){var item=that.data[index];cloneArray.push(item)}that.cloneFirstItem(cloneArray),that.cloneLastItem(cloneArray),that.cloneData=cloneArray},that.cloneFirstItem=function(cloneArray){var firstItem=cloneArray[0],firstItemClone=angular.copy(firstItem);cloneArray.push(firstItemClone)},that.cloneLastItem=function(cloneArray){var lastItem=cloneArray[that.data.length-1],lastItemClone=angular.copy(lastItem);cloneArray.unshift(lastItemClone)},that.validateAutoSlide=function(){that.autoSlide?that.startAutoSlide():that.stopAutoSlide()},that.restartAutoSlide=function(){that.autoSlide&&(that.transitionsEnabled?$timeout(function(){that.stopAutoSlide(),that.startAutoSlide()},that.transitionsTime):(that.stopAutoSlide(),that.startAutoSlide()))},that.startAutoSlide=function(){angular.isDefined(that.autoSlideInterval)||(that.autoSlideInterval=$interval(function(){that.navigateRight()},that.autoSlideTime))},that.stopAutoSlide=function(){angular.isDefined(that.autoSlideInterval)&&($interval.cancel(that.autoSlideInterval),that.autoSlideInterval=void 0)},that.onNavigateLeft=function(){that.navigateLeft(),that.restartAutoSlide()},that.navigateLeft=function(){that.isDataInvalidOrTooSmall()||(that.currentIndex--,that.radioButtonIndex=that.currentIndex,that.currentMarginLeftValue+=that.elementWidth,that.applyMarginLeft(),that.restartAutoSlide(),-1===that.currentIndex&&that.restartFromLastItem())},that.restartFromLastItem=function(){$timeout(function(){that.disableTransitions(),that.currentMarginLeftValue=that.elementWidth*that.data.length*-1,that.applyMarginLeft(),that.currentIndex=that.data.length-1,that.radioButtonIndex=that.currentIndex,that.enableTransitions()},that.transitionsTime)},that.onNavigateRight=function(){that.navigateRight(),that.restartAutoSlide()},that.navigateRight=function(){that.isDataInvalidOrTooSmall()||(that.currentIndex++,that.radioButtonIndex=that.currentIndex,that.currentMarginLeftValue-=that.elementWidth,that.applyMarginLeft(),that.restartAutoSlide(),that.currentIndex===that.data.length&&$timeout(function(){that.restartFromFirstItem()},that.transitionsTime))},that.applyMarginLeft=function(){that.slidesContainer.css("margin-left",that.currentMarginLeftValue+"px")},that.disableTransitions=function(){that.slidesContainer.css("transition","none"),that.transitionsEnabled=!1},that.enableTransitions=function(){$timeout(function(){that.slidesContainer.css("transition","margin 0.5s ease-in-out"),that.transitionsEnabled=!0},200)},that.onRadioButtonClick=function(){var multiplier;that.radioButtonIndex>that.currentIndex?(multiplier=that.radioButtonIndex-that.currentIndex,that.currentMarginLeftValue-=that.elementWidth*multiplier):(multiplier=that.currentIndex-that.radioButtonIndex,that.currentMarginLeftValue+=that.elementWidth*multiplier),that.currentIndex=that.radioButtonIndex,that.applyMarginLeft(),that.restartAutoSlide()},that.isDataInvalidOrTooSmall=function(){return that.data&&0!==that.data.length&&1!==that.data.length?!1:!0}}angular.module("jkAngularCarousel").controller("CarouselController",["$timeout","$attrs","$interval",CarouselController])}(),function(){"use strict";function CarouselDirective(){function link(scope,element,attrs,ctrl){ctrl.registerElement(element),scope.$on("$destroy",function(){ctrl.stopAutoSlide()})}return{restrict:"E",replace:!0,templateUrl:"carousel-directive.html",scope:{},controller:"CarouselController",controllerAs:"ctrl",bindToController:{data:"=",itemTemplateUrl:"=",autoSlide:"@?",autoSlideTime:"@?"},link:link}}angular.module("jkAngularCarousel").directive("jkCarousel",[CarouselDirective])}(),function(){angular.module("jkAngularCarousel.templates",[]).run(["$templateCache",function($templateCache){$templateCache.put("carousel-directive.html",'<div class="jk-carousel" >\n\n  <div class="slides-container" layout="row" >\n    <div\n      ng-repeat="slideItem in ctrl.cloneData"\n      class="slide"\n    >\n      <div ng-include="ctrl.itemTemplateUrl" ></div>\n    </div>\n  </div>\n\n  <md-button class="md-icon-button left-arrow-button" >\n    <md-icon ng-click="ctrl.navigateLeft()" >chevron_left</md-icon>\n  </md-button>\n\n  <md-button class="md-icon-button right-arrow-button" >\n    <md-icon ng-click="ctrl.navigateRight()" >chevron_right</md-icon>\n  </md-button>\n\n  <md-radio-group\n    class="radio-buttons-container"\n    layout="row"\n    ng-model="ctrl.radioButtonIndex"\n    layout-align="center center"\n    ng-change="ctrl.onRadioButtonClick()" >\n    <md-radio-button\n      ng-repeat="item in ctrl.data"\n      ng-value="$index"\n      aria-label="$index" >\n    </md-radio-button>\n  </md-radio-group>\n\n</div>\n')}])}();

package.json

 {
   "name": "angular-jk-carousel",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Amazing carousel for angular material",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -48,8 +48,13 @@ # AngularJS Carousel
 <div>
-  <img ng-src="{{item.src}}" style="height: 400px" >
+  <img ng-src="{{slideItem.src}}" style="height: 400px" >
 </div>
 ```
+ - It is possible to set the component to auto slide, if the auto slide time is not set, we use the default of 5 seconds:
+ ```html
+ <jk-carousel data="ctrl.arrayData" item-template-url="'item-template.html'" auto-slide="true" auto-slide-time="1000" >
+ </jk-carousel>
+ ```
 
+
 ## TODO :
- - Autoslide feature
  - Add more transition types
@@ -56,0 +61,0 @@ - Make the component responsive

src/app/carousel.controller.js

 (function() {
   'use strict';
 
-  function CarouselController($timeout, $attrs) {
+  function CarouselController($timeout, $attrs, $interval) {
 
@@ -10,6 +10,13 @@ var that = this;
     that.radioButtonIndex = 0;
-    $attrs.$observe('data', function() {
-      that.onDataChange();
-    });
+    that.transitionsTime = 500;
+    that.transitionsEnabled = true;
 
+    if (that.autoSlide === undefined) {
+      that.autoSlide = false;
+    }
+
+    if (that.autoSlideTime === undefined) {
+      that.autoSlideTime = 5000;
+    }
+
     that.registerElement = function(element) {
@@ -20,3 +27,33 @@ that.element = element;
 
-    that.resetSlidesContainerToDefaultPosition = function() {
+    $attrs.$observe('data', function() {
+      that.onDataChange();
+    });
+
+    $attrs.$observe('autoSlide', function() {
+      that.autoSlide = that.autoSlide === 'true';
+      that.validateAutoSlide();
+    });
+
+    $attrs.$observe('autoSlideTime', function() {
+      that.autoSlideTime = parseInt(that.autoSlideTime);
+      that.restartAutoSlide();
+    });
+
+    that.onDataChange = function() {
+      if (that.isDataInvalidOrTooSmall()) {
+        return;
+      }
+      that.executeCloneData();
+      $timeout(function() {
+        that.updateSlidesContainerWidth();
+        that.restartFromFirstItem();
+      });
+    };
+
+    that.updateSlidesContainerWidth = function() {
+      that.elementWidth = that.element.prop('offsetWidth');
+      that.slidesContainer.css('width', (that.elementWidth * that.cloneData.length) + 'px');
+    };
+
+    that.restartFromFirstItem = function() {
       if (!that.elementWidth) {
@@ -33,13 +70,2 @@ return;
 
-    that.onDataChange = function() {
-      if (that.isDataInvalidOrTooSmall()) {
-        return;
-      }
-      that.executeCloneData();
-      $timeout(function() {
-        that.updateSlidesContainerWidth();
-        that.resetSlidesContainerToDefaultPosition();
-      });
-    };
-
     that.executeCloneData = function() {
@@ -68,7 +94,45 @@ var cloneArray = [];
 
-    that.updateSlidesContainerWidth = function() {
-      that.elementWidth = that.element.prop('offsetWidth');
-      that.slidesContainer.css('width', (that.elementWidth * that.cloneData.length) + 'px');
+    that.validateAutoSlide = function() {
+      if (!that.autoSlide) {
+        that.stopAutoSlide();
+      } else {
+        that.startAutoSlide();
+      }
     };
 
+    that.restartAutoSlide = function() {
+      if (!that.autoSlide) {
+        return;
+      }
+      if (that.transitionsEnabled) {
+        $timeout(function() {
+          that.stopAutoSlide();
+          that.startAutoSlide();
+        }, that.transitionsTime);
+      } else {
+        that.stopAutoSlide();
+        that.startAutoSlide();
+      }
+    };
+
+    that.startAutoSlide = function() {
+      if (!angular.isDefined(that.autoSlideInterval)) {
+        that.autoSlideInterval = $interval(function() {
+          that.navigateRight();
+        }, that.autoSlideTime);
+      }
+    };
+
+    that.stopAutoSlide = function() {
+      if (angular.isDefined(that.autoSlideInterval)) {
+        $interval.cancel(that.autoSlideInterval);
+        that.autoSlideInterval = undefined;
+      }
+    };
+
+    that.onNavigateLeft = function() {
+      that.navigateLeft();
+      that.restartAutoSlide();
+    };
+
     that.navigateLeft = function() {
@@ -82,2 +146,3 @@ if (that.isDataInvalidOrTooSmall()) {
       that.applyMarginLeft();
+      that.restartAutoSlide();
       if (that.currentIndex === -1) {
@@ -96,5 +161,10 @@ that.restartFromLastItem();
         that.enableTransitions();
-      }, 500);
+      }, that.transitionsTime);
     };
 
+    that.onNavigateRight = function() {
+      that.navigateRight();
+      that.restartAutoSlide();
+    };
+
     that.navigateRight = function() {
@@ -108,6 +178,7 @@ if (that.isDataInvalidOrTooSmall()) {
       that.applyMarginLeft();
+      that.restartAutoSlide();
       if (that.currentIndex === that.data.length) {
         $timeout(function() {
-          that.resetSlidesContainerToDefaultPosition();
-        }, 500);
+          that.restartFromFirstItem();
+        }, that.transitionsTime);
       }
@@ -122,2 +193,3 @@ };
       that.slidesContainer.css('transition', 'none');
+      that.transitionsEnabled = false;
     };
@@ -128,2 +200,3 @@
         that.slidesContainer.css('transition', 'margin 0.5s ease-in-out');
+        that.transitionsEnabled = true;
       }, 200);
@@ -143,2 +216,3 @@ };
       that.applyMarginLeft();
+      that.restartAutoSlide();
     };
@@ -157,3 +231,3 @@
     .controller('CarouselController', [
-      '$timeout', '$attrs',
+      '$timeout', '$attrs', '$interval',
       CarouselController
@@ -160,0 +234,0 @@ ]);

src/app/carousel.directive.js

@@ -9,2 +9,5 @@ (function() {
       ctrl.registerElement(element);
+      scope.$on('$destroy', function() {
+        ctrl.stopAutoSlide();
+      });
     }
@@ -21,3 +24,5 @@
         data: '=',
-        itemTemplateUrl: '='
+        itemTemplateUrl: '=',
+        autoSlide: '@?',
+        autoSlideTime: '@?'
       },
@@ -34,2 +39,2 @@ link: link
 
-} ());
+}());

No alert changes

Improved metrics

Total package byte prevSize

33133

increased by17.96%

Lines of code

677

increased by25.14%

Number of lines in readme file

64

increased by8.47%

No dependency changes