feat(carousel): add slide indicators

Closes #145

Author: pkozlowski-opensource

src/carousel/carousel.js

@@ -85,6 +85,18 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
     return self.select(slides[newIndex], 'prev');
   };
 
+  $scope.select = function(slide) {
+    self.select(slide);
+  };
+
+  $scope.isActive = function(slide) {
+     return self.currentSlide === slide;
+  };
+
+  $scope.slides = function() {
+    return slides;
+  };
+
   $scope.$watch('interval', restartTimer);
   function restartTimer() {
     if (currentTimeout) {

src/carousel/test/carousel.spec.js

@@ -59,6 +59,11 @@ describe('carousel', function() {
       expect(navNext.length).toBe(1);
     });
 
+    it('should display clickable slide indicators', function () {
+      var indicators = elm.find('ol.carousel-indicators > li');
+      expect(indicators.length).toBe(3);
+    });
+
     it('should go to next when clicking next button', function() {
       var navNext = elm.find('a.right');
       testSlideActive(0);
@@ -81,6 +86,12 @@ describe('carousel', function() {
       testSlideActive(0);
     });
 
+    it('should select a slide when clicking on slide indicators', function () {
+      var indicators = elm.find('ol.carousel-indicators > li');
+      indicators.eq(1).click();
+      testSlideActive(1);
+    });
+
     it('shouldnt go forward if interval is NaN or negative', function() {
       testSlideActive(0);
       scope.$apply('interval = -1');

template/carousel/carousel.html

@@ -1,4 +1,7 @@
 <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
+    <ol class="carousel-indicators">
+        <li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
+    </ol>
     <div class="carousel-inner" ng-transclude></div>
     <a ng-click="prev()" class="carousel-control left">&lsaquo;</a>
     <a ng-click="next()" class="carousel-control right">&rsaquo;</a>