1

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

daveoncode
  • 18,900
  • 15
  • 104
  • 159

2 Answers2

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.

Ilya Luzyanin
  • 7,910
  • 4
  • 29
  • 49
  • 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) – daveoncode Apr 01 '15 at 12:47
  • Have you tried putting it in the `head` tag? I've used [this solution](http://stackoverflow.com/a/17677437/2571926) in my project when I faced similar situation, it worked nicely. – Ilya Luzyanin Apr 01 '15 at 12:54
0

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

example:

    <uib-carousel no-wrap="true">
    </uib-carousel>
Devin Garner
  • 1,361
  • 9
  • 20