angular-jk-carousel - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

dist/jk-carousel.js

@@ -12,3 +12,3 @@ (function() {
 
-  function CarouselController($timeout, $attrs, $interval) {
+  function CarouselController($timeout, $attrs, $interval, $window) {
 
@@ -22,29 +22,15 @@ var that = this;
 
-    if (that.autoSlide === undefined) {
-      that.autoSlide = false;
-    }
+    $attrs.$observe('data', function() {
+      that.onDataChange();
+    });
 
-    if (that.autoSlideTime === undefined) {
-      that.autoSlideTime = 5000;
-    }
-
     that.registerElement = function(element) {
       that.element = element;
+      that.elementParent = that.element.parent();
       that.slidesContainer = angular.element(that.element.find('div')[0]);
+      $window.addEventListener('resize', function() {
+        that.updateSlidesContainerWidth();
+      });
     };
 
-    $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() {
@@ -62,12 +48,61 @@ if (that.isDataInvalidOrTooSmall()) {
     that.updateSlidesContainerWidth = function() {
-      that.elementWidth = that.element.prop('offsetWidth');
-      that.slidesContainer.css('width', (that.elementWidth * that.cloneData.length) + 'px');
+      that.scaleContent();
+      that.currentWidth = that.element.prop('offsetWidth');
+      that.currentHeight = that.element.prop('offsetHeight');
+      that.resizeSlides();
+      var newSlidesContainerWidth = that.currentWidth * that.cloneData.length;
+      that.slidesContainer.css('width', newSlidesContainerWidth + 'px');
+      that.scaleMarginLeft(newSlidesContainerWidth);
+      that.currentSlidesContainerWidth = newSlidesContainerWidth;
     };
 
+    that.scaleContent = function() {
+      that.maxWidth = that.maxWidth ? parseInt(that.maxWidth): 0;
+      if( that.maxWidth === 0 ){
+        that.maxWidth = that.element.prop('offsetWidth');
+      }
+      that.maxHeight = that.maxHeight ? parseInt(that.maxHeight): 0;
+      if( that.maxHeight === 0 ){
+        that.maxHeight = that.element.prop('offsetHeight');
+      }
+      var currentElementParentWidth = that.elementParent.prop('offsetWidth');
+      if( currentElementParentWidth < that.maxWidth ){
+        console.log(currentElementParentWidth, that.maxWidth);
+        var newHeight = (that.maxHeight * currentElementParentWidth) / that.maxWidth;
+        that.element.css('width', currentElementParentWidth + 'px');
+        that.element.css('height', newHeight + 'px');
+      }else if( currentElementParentWidth >= that.maxWidth ){
+        that.element.css('width', that.maxWidth + 'px');
+        that.element.css('height', that.maxHeight + 'px');
+      }
+    };
+
+    that.resizeSlides = function(){
+      var slides = $window.document.getElementsByClassName('slide');
+      for( var index=0; index < slides.length; index++ ){
+        var slide = angular.element(slides[index]);
+        slide.css('width', that.currentWidth + 'px');
+        slide.css('height', that.currentHeight + 'px');
+      }
+    };
+
+    that.scaleMarginLeft = function(newSlidesContainerWidth){
+      if(
+        that.currentSlidesContainerWidth &&
+        that.currentSlidesContainerWidth !== newSlidesContainerWidth
+      ){
+        that.currentMarginLeftValue = that.currentMarginLeftValue * newSlidesContainerWidth;
+        that.currentMarginLeftValue = that.currentMarginLeftValue / that.currentSlidesContainerWidth;
+        that.disableTransitions();
+        that.applyMarginLeft();
+        that.enableTransitions();
+      }
+    };
+
     that.restartFromFirstItem = function() {
-      if (!that.elementWidth) {
+      if (!that.currentWidth) {
         return;
       }
       that.disableTransitions();
-      that.currentMarginLeftValue = that.elementWidth * -1;
+      that.currentMarginLeftValue = that.currentWidth * -1;
       that.applyMarginLeft();
@@ -151,3 +186,3 @@ that.currentIndex = 0;
       that.radioButtonIndex = that.currentIndex;
-      that.currentMarginLeftValue += that.elementWidth;
+      that.currentMarginLeftValue += that.currentWidth;
       that.applyMarginLeft();
@@ -163,3 +198,3 @@ that.restartAutoSlide();
         that.disableTransitions();
-        that.currentMarginLeftValue = (that.elementWidth * that.data.length) * -1;
+        that.currentMarginLeftValue = (that.currentWidth * that.data.length) * -1;
         that.applyMarginLeft();
@@ -183,3 +218,3 @@ that.currentIndex = that.data.length - 1;
       that.radioButtonIndex = that.currentIndex;
-      that.currentMarginLeftValue -= that.elementWidth;
+      that.currentMarginLeftValue -= that.currentWidth;
       that.applyMarginLeft();
@@ -214,6 +249,6 @@ that.restartAutoSlide();
         multiplier = that.radioButtonIndex - that.currentIndex;
-        that.currentMarginLeftValue -= (that.elementWidth * multiplier);
+        that.currentMarginLeftValue -= (that.currentWidth * multiplier);
       } else {
         multiplier = that.currentIndex - that.radioButtonIndex;
-        that.currentMarginLeftValue += (that.elementWidth * multiplier);
+        that.currentMarginLeftValue += (that.currentWidth * multiplier);
       }
@@ -226,3 +261,3 @@ that.currentIndex = that.radioButtonIndex;
     that.isDataInvalidOrTooSmall = function() {
-      if (!that.data || that.data.length === 0 || that.data.length === 1) {
+      if (!that.data || that.data.length === 0) {
         return true;
@@ -236,4 +271,4 @@ }
     .module('jkAngularCarousel')
-    .controller('CarouselController', [
-      '$timeout', '$attrs', '$interval',
+    .controller('JKCarouselController', [
+      '$timeout', '$attrs', '$interval', '$window',
       CarouselController
@@ -251,2 +286,8 @@ ]);
     function link(scope, element, attrs, ctrl) {
+      if (attrs.autoSlide === undefined) {
+        ctrl.autoSlide = false;
+      }
+      if (attrs.autoSlideTime === undefined) {
+        ctrl.autoSlideTime = 5000;
+      }
       ctrl.registerElement(element);
@@ -256,2 +297,8 @@ scope.$on('$destroy', function() {
       });
+      scope.$watch('ctrl.autoSlide', function() {
+        ctrl.validateAutoSlide();
+      });
+      scope.$watch('ctrl.autoSlideTime', function() {
+        ctrl.restartAutoSlide();
+      });
     }
@@ -264,3 +311,3 @@
       scope: {},
-      controller: 'CarouselController',
+      controller: 'JKCarouselController',
       controllerAs: 'ctrl',
@@ -270,2 +317,4 @@ bindToController: {
         itemTemplateUrl: '=',
+        maxWidth: '@?',
+        maxHeight: '@?',
         autoSlide: '@?',
@@ -272,0 +321,0 @@ autoSlideTime: '@?'

dist/jk-carousel.min.js

@@ -1,1 +0,1 @@
-!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')}])}();
+!function(){"use strict";angular.module("jkAngularCarousel",["jkAngularCarousel.templates"])}(),function(){"use strict";function CarouselController($timeout,$attrs,$interval,$window){var that=this;that.currentIndex=0,that.currentMarginLeftValue=0,that.radioButtonIndex=0,that.transitionsTime=500,that.transitionsEnabled=!0,$attrs.$observe("data",function(){that.onDataChange()}),that.registerElement=function(element){that.element=element,that.elementParent=that.element.parent(),that.slidesContainer=angular.element(that.element.find("div")[0]),$window.addEventListener("resize",function(){that.updateSlidesContainerWidth()})},that.onDataChange=function(){that.isDataInvalidOrTooSmall()||(that.executeCloneData(),$timeout(function(){that.updateSlidesContainerWidth(),that.restartFromFirstItem()}))},that.updateSlidesContainerWidth=function(){that.scaleContent(),that.currentWidth=that.element.prop("offsetWidth"),that.currentHeight=that.element.prop("offsetHeight"),that.resizeSlides();var newSlidesContainerWidth=that.currentWidth*that.cloneData.length;that.slidesContainer.css("width",newSlidesContainerWidth+"px"),that.scaleMarginLeft(newSlidesContainerWidth),that.currentSlidesContainerWidth=newSlidesContainerWidth},that.scaleContent=function(){that.maxWidth=that.maxWidth?parseInt(that.maxWidth):0,0===that.maxWidth&&(that.maxWidth=that.element.prop("offsetWidth")),that.maxHeight=that.maxHeight?parseInt(that.maxHeight):0,0===that.maxHeight&&(that.maxHeight=that.element.prop("offsetHeight"));var currentElementParentWidth=that.elementParent.prop("offsetWidth");if(currentElementParentWidth<that.maxWidth){console.log(currentElementParentWidth,that.maxWidth);var newHeight=that.maxHeight*currentElementParentWidth/that.maxWidth;that.element.css("width",currentElementParentWidth+"px"),that.element.css("height",newHeight+"px")}else currentElementParentWidth>=that.maxWidth&&(that.element.css("width",that.maxWidth+"px"),that.element.css("height",that.maxHeight+"px"))},that.resizeSlides=function(){for(var slides=$window.document.getElementsByClassName("slide"),index=0;index<slides.length;index++){var slide=angular.element(slides[index]);slide.css("width",that.currentWidth+"px"),slide.css("height",that.currentHeight+"px")}},that.scaleMarginLeft=function(newSlidesContainerWidth){that.currentSlidesContainerWidth&&that.currentSlidesContainerWidth!==newSlidesContainerWidth&&(that.currentMarginLeftValue=that.currentMarginLeftValue*newSlidesContainerWidth,that.currentMarginLeftValue=that.currentMarginLeftValue/that.currentSlidesContainerWidth,that.disableTransitions(),that.applyMarginLeft(),that.enableTransitions())},that.restartFromFirstItem=function(){that.currentWidth&&(that.disableTransitions(),that.currentMarginLeftValue=-1*that.currentWidth,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.currentWidth,that.applyMarginLeft(),that.restartAutoSlide(),-1===that.currentIndex&&that.restartFromLastItem())},that.restartFromLastItem=function(){$timeout(function(){that.disableTransitions(),that.currentMarginLeftValue=that.currentWidth*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.currentWidth,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.currentWidth*multiplier):(multiplier=that.currentIndex-that.radioButtonIndex,that.currentMarginLeftValue+=that.currentWidth*multiplier),that.currentIndex=that.radioButtonIndex,that.applyMarginLeft(),that.restartAutoSlide()},that.isDataInvalidOrTooSmall=function(){return that.data&&0!==that.data.length?!1:!0}}angular.module("jkAngularCarousel").controller("JKCarouselController",["$timeout","$attrs","$interval","$window",CarouselController])}(),function(){"use strict";function CarouselDirective(){function link(scope,element,attrs,ctrl){void 0===attrs.autoSlide&&(ctrl.autoSlide=!1),void 0===attrs.autoSlideTime&&(ctrl.autoSlideTime=5e3),ctrl.registerElement(element),scope.$on("$destroy",function(){ctrl.stopAutoSlide()}),scope.$watch("ctrl.autoSlide",function(){ctrl.validateAutoSlide()}),scope.$watch("ctrl.autoSlideTime",function(){ctrl.restartAutoSlide()})}return{restrict:"E",replace:!0,templateUrl:"carousel-directive.html",scope:{},controller:"JKCarouselController",controllerAs:"ctrl",bindToController:{data:"=",itemTemplateUrl:"=",maxWidth:"@?",maxHeight:"@?",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.4",
+  "version": "0.1.0",
   "description": "Amazing carousel for angular material",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -1,4 +0,4 @@
-# AngularJS Carousel
+# AngularJS Responsive Carousel
 
-An Amazing AngularJS 1 Carousel that works with Angular Material and has no jQuery dependency.
+An Amazing Fully Responsive AngularJS 1 Carousel that works with Angular Material and has no jQuery dependency.
 
@@ -30,8 +30,10 @@ Demo : https://embed.plnkr.co/ovBExhpO40yzWPJ47QFE/
 
- - Add a `jk-carousel` tag to your html, set the data array and the item template url
+ - Add a `jk-carousel` tag to your html, set the data array, the item template url and the carousel max width and height.
 ```html
-<jk-carousel data="ctrl.arrayData" item-template-url="'item-template.html'" >
+<jk-carousel data="ctrl.arrayData" item-template-url="'item-template.html'" max-width="700" max-height="400" >
 </jk-carousel>
 ```
 
+  NOTE: If a maxWidth and a maxHeight is not set, the component will work, but, it will not be responsive, this feature requires those properties to be properly set ('100%' is not an accepted value, a specific size in pixels needs to be set).
+
  - The data array can be pretty much any collection of any kind of objects that you like
@@ -49,3 +51,3 @@ ```js
 <div>
-  <img ng-src="{{slideItem.src}}" style="height: 400px" >
+  <img ng-src="{{slideItem.src}}" >
 </div>
@@ -55,3 +57,3 @@ ```
  ```html
- <jk-carousel data="ctrl.arrayData" item-template-url="'item-template.html'" auto-slide="true" auto-slide-time="1000" >
+ <jk-carousel data="ctrl.arrayData" item-template-url="'item-template.html'" auto-slide="true" auto-slide-time="1000" max-width="700" max-height="400" >
  </jk-carousel>
@@ -62,6 +64,5 @@ ```
 ## TODO :
- - Add more transition types
- - Make the component responsive
+ - Add Fade transition type
 
 ## License
 This module is released under the permissive [MIT license](http://revolunet.mit-license.org). Contributions or suggestions are always welcome :D

src/app/carousel.controller.js

 (function() {
   'use strict';
 
-  function CarouselController($timeout, $attrs, $interval) {
+  function CarouselController($timeout, $attrs, $interval, $window) {
 
@@ -13,29 +13,15 @@ var that = this;
 
-    if (that.autoSlide === undefined) {
-      that.autoSlide = false;
-    }
+    $attrs.$observe('data', function() {
+      that.onDataChange();
+    });
 
-    if (that.autoSlideTime === undefined) {
-      that.autoSlideTime = 5000;
-    }
-
     that.registerElement = function(element) {
       that.element = element;
+      that.elementParent = that.element.parent();
       that.slidesContainer = angular.element(that.element.find('div')[0]);
+      $window.addEventListener('resize', function() {
+        that.updateSlidesContainerWidth();
+      });
     };
 
-    $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() {
@@ -53,12 +39,61 @@ if (that.isDataInvalidOrTooSmall()) {
     that.updateSlidesContainerWidth = function() {
-      that.elementWidth = that.element.prop('offsetWidth');
-      that.slidesContainer.css('width', (that.elementWidth * that.cloneData.length) + 'px');
+      that.scaleContent();
+      that.currentWidth = that.element.prop('offsetWidth');
+      that.currentHeight = that.element.prop('offsetHeight');
+      that.resizeSlides();
+      var newSlidesContainerWidth = that.currentWidth * that.cloneData.length;
+      that.slidesContainer.css('width', newSlidesContainerWidth + 'px');
+      that.scaleMarginLeft(newSlidesContainerWidth);
+      that.currentSlidesContainerWidth = newSlidesContainerWidth;
     };
 
+    that.scaleContent = function() {
+      that.maxWidth = that.maxWidth ? parseInt(that.maxWidth): 0;
+      if( that.maxWidth === 0 ){
+        that.maxWidth = that.element.prop('offsetWidth');
+      }
+      that.maxHeight = that.maxHeight ? parseInt(that.maxHeight): 0;
+      if( that.maxHeight === 0 ){
+        that.maxHeight = that.element.prop('offsetHeight');
+      }
+      var currentElementParentWidth = that.elementParent.prop('offsetWidth');
+      if( currentElementParentWidth < that.maxWidth ){
+        console.log(currentElementParentWidth, that.maxWidth);
+        var newHeight = (that.maxHeight * currentElementParentWidth) / that.maxWidth;
+        that.element.css('width', currentElementParentWidth + 'px');
+        that.element.css('height', newHeight + 'px');
+      }else if( currentElementParentWidth >= that.maxWidth ){
+        that.element.css('width', that.maxWidth + 'px');
+        that.element.css('height', that.maxHeight + 'px');
+      }
+    };
+
+    that.resizeSlides = function(){
+      var slides = $window.document.getElementsByClassName('slide');
+      for( var index=0; index < slides.length; index++ ){
+        var slide = angular.element(slides[index]);
+        slide.css('width', that.currentWidth + 'px');
+        slide.css('height', that.currentHeight + 'px');
+      }
+    };
+
+    that.scaleMarginLeft = function(newSlidesContainerWidth){
+      if(
+        that.currentSlidesContainerWidth &&
+        that.currentSlidesContainerWidth !== newSlidesContainerWidth
+      ){
+        that.currentMarginLeftValue = that.currentMarginLeftValue * newSlidesContainerWidth;
+        that.currentMarginLeftValue = that.currentMarginLeftValue / that.currentSlidesContainerWidth;
+        that.disableTransitions();
+        that.applyMarginLeft();
+        that.enableTransitions();
+      }
+    };
+
     that.restartFromFirstItem = function() {
-      if (!that.elementWidth) {
+      if (!that.currentWidth) {
         return;
       }
       that.disableTransitions();
-      that.currentMarginLeftValue = that.elementWidth * -1;
+      that.currentMarginLeftValue = that.currentWidth * -1;
       that.applyMarginLeft();
@@ -142,3 +177,3 @@ that.currentIndex = 0;
       that.radioButtonIndex = that.currentIndex;
-      that.currentMarginLeftValue += that.elementWidth;
+      that.currentMarginLeftValue += that.currentWidth;
       that.applyMarginLeft();
@@ -154,3 +189,3 @@ that.restartAutoSlide();
         that.disableTransitions();
-        that.currentMarginLeftValue = (that.elementWidth * that.data.length) * -1;
+        that.currentMarginLeftValue = (that.currentWidth * that.data.length) * -1;
         that.applyMarginLeft();
@@ -174,3 +209,3 @@ that.currentIndex = that.data.length - 1;
       that.radioButtonIndex = that.currentIndex;
-      that.currentMarginLeftValue -= that.elementWidth;
+      that.currentMarginLeftValue -= that.currentWidth;
       that.applyMarginLeft();
@@ -205,6 +240,6 @@ that.restartAutoSlide();
         multiplier = that.radioButtonIndex - that.currentIndex;
-        that.currentMarginLeftValue -= (that.elementWidth * multiplier);
+        that.currentMarginLeftValue -= (that.currentWidth * multiplier);
       } else {
         multiplier = that.currentIndex - that.radioButtonIndex;
-        that.currentMarginLeftValue += (that.elementWidth * multiplier);
+        that.currentMarginLeftValue += (that.currentWidth * multiplier);
       }
@@ -217,3 +252,3 @@ that.currentIndex = that.radioButtonIndex;
     that.isDataInvalidOrTooSmall = function() {
-      if (!that.data || that.data.length === 0 || that.data.length === 1) {
+      if (!that.data || that.data.length === 0) {
         return true;
@@ -227,4 +262,4 @@ }
     .module('jkAngularCarousel')
-    .controller('CarouselController', [
-      '$timeout', '$attrs', '$interval',
+    .controller('JKCarouselController', [
+      '$timeout', '$attrs', '$interval', '$window',
       CarouselController
@@ -231,0 +266,0 @@ ]);

src/app/carousel.directive.js

@@ -8,2 +8,8 @@ (function() {
     function link(scope, element, attrs, ctrl) {
+      if (attrs.autoSlide === undefined) {
+        ctrl.autoSlide = false;
+      }
+      if (attrs.autoSlideTime === undefined) {
+        ctrl.autoSlideTime = 5000;
+      }
       ctrl.registerElement(element);
@@ -13,2 +19,8 @@ scope.$on('$destroy', function() {
       });
+      scope.$watch('ctrl.autoSlide', function() {
+        ctrl.validateAutoSlide();
+      });
+      scope.$watch('ctrl.autoSlideTime', function() {
+        ctrl.restartAutoSlide();
+      });
     }
@@ -21,3 +33,3 @@
       scope: {},
-      controller: 'CarouselController',
+      controller: 'JKCarouselController',
       controllerAs: 'ctrl',
@@ -27,2 +39,4 @@ bindToController: {
         itemTemplateUrl: '=',
+        maxWidth: '@?',
+        maxHeight: '@?',
         autoSlide: '@?',
@@ -29,0 +43,0 @@ autoSlideTime: '@?'

No alert changes

Improved metrics

Total package byte prevSize

39767

increased by20.02%

Lines of code

776

increased by14.62%

Number of lines in readme file

65

increased by1.56%

No dependency changes