Added 2 small features: Docking to an element and autohiding the indicators

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)
 

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; }

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("<div id='carousel-" + carouselId +"' class='rn-carousel-container'></div>"),
@@ -154,10 +155,30 @@ angular.module('angular-carousel')
 
                     // enable carousel indicator
                     if (angular.isDefined(iAttributes.rnCarouselIndicator)) {
-                        var indicator = $compile("<div id='carousel-" + carouselId +"-indicator' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-indicators class='rn-carousel-indicator'></div>")(scope);
-                        container.append(indicator);
+                        indicator = $compile("<div id='carousel-" + carouselId +"-indicator' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-indicators class='rn-carousel-indicator'></div>")(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("<div id='carousel-" + carouselId +"-controls' index='indicatorIndex' items='carouselIndicatorArray' rn-carousel-controls class='rn-carousel-controls'></div>")(scope);