diff --git a/README.md b/README.md index 5acba04..25f4ece 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,11 @@ angular.module('MyApp', ['angular-carousel']); - `rn-carousel-buffered` boolean value to enable the carousel buffering, good to minimize the DOM, defaults to 5 slides. (works only with arrays) - `rn-carousel-swipe` boolean value to enable/disable swiping (default true) - `rn-carousel-control` boolean value to enable builtin prev/next buttons (you can override by CSS) - + +### Additional Options: + - `rn-carousel-indicator-dock="#elementID"` Add this attribute to dock the carousel indicators to an element with the specified ID, useful when the carousel is inside a container with "overflow: hidden". + - `rn-carousel-indicator-autohide` Add this attribute to hide the carousel indicators if there are less than 2 elements to show. + ## Todo : - see the [TODO file](./TODO) diff --git a/dist/angular-carousel.css b/dist/angular-carousel.css index d8c85fb..7e4a324 100755 --- a/dist/angular-carousel.css +++ b/dist/angular-carousel.css @@ -41,7 +41,7 @@ text-align: center; height: 20px; background-color: black; - background-color: rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0.3); position: relative; bottom: 0; cursor: pointer; } diff --git a/dist/angular-carousel.js b/dist/angular-carousel.js index 5a59673..9110ba9 100755 --- a/dist/angular-carousel.js +++ b/dist/angular-carousel.js @@ -134,7 +134,8 @@ angular.module('angular-carousel') slidesCount = 0, swipeMoved = false, // javascript based animation easing - timestamp; + timestamp, + indicator; // add a wrapper div that will hide the overflow var carousel = iElement.wrap(""), @@ -154,10 +155,30 @@ angular.module('angular-carousel') // enable carousel indicator if (angular.isDefined(iAttributes.rnCarouselIndicator)) { - var indicator = $compile("")(scope); - container.append(indicator); + indicator = $compile("")(scope); + indicator.appendTo(container); } + // check if the indicator should be docked to a specific element + iAttributes.$observe('rnCarouselIndicatorDock', function(value) { + // check if target dock element actually exists + if(angular.element('#' + value).length) { + // move the indicator to the dock element + var dock = angular.element('#' + value); + indicator.css('position', 'absolute'); + indicator.appendTo(dock); + } + }); + + // check for the indicator-autohide attribute, which + // hides the indicators if there is no need for them + // i.e. if there are less than 2 elements to show + iAttributes.$observe('rnCarouselIndicatorAutohide', function(value) { + if(slidesCount < 2) { + indicator.remove(); + } + }); + // enable carousel controls if (angular.isDefined(iAttributes.rnCarouselControl)) { var controls = $compile("")(scope);