Angular ui bootstrap carousel: avoid recursion

Question

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 :(

Ilya Luzyanin · Accepted Answer · 2015-04-01 11:56:39Z

2

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.

answered Apr 1, 2015 at 11:56

Ilya Luzyanin

8,1184 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

daveoncode Over a year ago

yes, it seems the only feasible approach... anyway in my scenario I load compiled templates and this inline template is ignored since the cache is already populated... any advice? Should I remove it from the templateCache in my run() block? (it would be sucky :P)

Ilya Luzyanin Over a year ago

Have you tried putting it in the head tag? I've used this solution in my project when I faced similar situation, it worked nicely.

Devin Garner · Accepted Answer · 2015-11-18 21:59:42Z

0

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

example:

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

answered Nov 18, 2015 at 21:59

Devin Garner

1,41610 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular ui bootstrap carousel: avoid recursion

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related