angularjs - Angular ui bootstrap carousel: avoid recursion -
i'm using angular ui bootstrap carousel , i'm wondering if there clean , reliable way stop recursion in navigation. mean, don't want able use arrow if i'm on first slide , don't want right arrow if i'm on last slide... should do?
ps: library sucks regarding customization... it's unbelievable such common requirements can't satisfied passing simple parameters :(
well, maybe not easiest way, can replace angular's default template own this:
<script id="template/carousel/carousel.html" type="text/ng-template"> <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()"> <ol class="carousel-indicators" ng-show="slides.length > 1"> <li ng-repeat="slide in slides | orderby:'index' track $index" ng-class="{active: isactive(slide)}" ng-click="select(slide)"></li> </ol> <div class="carousel-inner" ng-transclude></div> <a class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1 && !isactive(slides[0])"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" ng-click="next()" ng-show="slides.length > 1 && !isactive(slides[slides.length - 1])"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> </script>
i've copied & pasted original template , amended ng-show
conditions according needs. see demo.
Comments
Post a Comment