CODEWITHSUNDEEP
angularjsangular-uiangular-ui-bootstrap
daveoncode
daveoncode

Reputation: 19598

Angular ui bootstrap carousel: avoid recursion

I'm using angular ui bootstrap carousel and I'm wondering if there is a clean and reliable way to stop the recursion in the navigation. I mean, I don't want to be able to use the back arrow if I'm on the first slide and I don't want the right arrow if I'm on the last slide... what should I do?

ps: This library really sucks regarding customization... it's unbelievable that such common requirements can't be satisfied by passing simple parameters :(

Upvotes: 1

Views: 718

Answers (2)

Devin Garner
Devin Garner

Reputation: 1406

The no-wrap attribute should give you what you need.

example:

    <uib-carousel no-wrap="true">
    </uib-carousel>

Upvotes: 0

Ilya Luzyanin
Ilya Luzyanin

Reputation: 8110

Well, this is maybe not the easiest way, but you always can replace angular's default template with your own like 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 by $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 basically just copied & pasted the original template and amended ng-show conditions according to your needs. See demo.

Upvotes: 2

Related Questions