diff --git a/src/carousel/carousel.js b/src/carousel/carousel.js index 11a3a9045e..f745229c76 100644 --- a/src/carousel/carousel.js +++ b/src/carousel/carousel.js @@ -123,6 +123,14 @@ angular.module('ui.bootstrap.carousel', []) return $scope.active === slide.slide.index; }; + $scope.isPrevDisabled = function() { + return $scope.active === 0 && $scope.noWrap(); + }; + + $scope.isNextDisabled = function() { + return $scope.active === slides.length - 1 && $scope.noWrap(); + }; + $scope.pause = function() { if (!$scope.noPause) { isPlaying = false; diff --git a/src/carousel/test/carousel.spec.js b/src/carousel/test/carousel.spec.js index a69001d30a..e43ce5f6dd 100644 --- a/src/carousel/test/carousel.spec.js +++ b/src/carousel/test/carousel.spec.js @@ -163,6 +163,38 @@ describe('carousel', function() { expect(navPrev.length).toBe(0); }); + it('should disable prev button when slide index is 0 and noWrap is truthy', function() { + scope.$apply(); + + var $scope = elm.isolateScope(); + $scope.noWrap = function() {return true;}; + + $scope.isPrevDisabled(); + scope.$apply(); + + var navPrev = elm.find('a.left'); + expect(navPrev.hasClass('disabled')).toBe(true); + }); + + it('should disable next button when last slide is active and noWrap is truthy', function() { + scope.slides = [ + {content: 'one', index: 0}, + {content: 'two', index: 1} + ]; + + scope.$apply(); + + var $scope = elm.isolateScope(); + $scope.noWrap = function() {return true;}; + $scope.next(); + + $scope.isNextDisabled(); + scope.$apply(); + + var navNext = elm.find('a.right'); + expect(navNext.hasClass('disabled')).toBe(true); + }); + it('should show navigation when there are 3 slides', function () { var indicators = elm.find('ol.carousel-indicators > li'); expect(indicators.length).not.toBe(0); diff --git a/template/carousel/carousel.html b/template/carousel/carousel.html index c0b66dc3ed..dc98a5aaed 100644 --- a/template/carousel/carousel.html +++ b/template/carousel/carousel.html @@ -1,10 +1,10 @@ <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()"> <div class="carousel-inner" ng-transclude></div> - <a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1"> + <a role="button" href class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1"> <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">previous</span> </a> - <a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1"> + <a role="button" href class="right carousel-control" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1"> <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">next</span> </a>