Angular ui bootstrap 轮播：避免递归

Question

我正在使用 angular ui bootstrap 旋转木马，我想知道是否有一种干净可靠的方法来停止导航中的递归。我的意思是，如果我在第一张幻灯片上，我不想使用后退箭头；如果我在最后一张幻灯片上，我不想使用右箭头……我该怎么办？

ps：这个库在定制方面真的很糟糕......令人难以置信的是，通过传递简单的参数无法满足这种常见的要求ui:(

Answer 1

好吧，这可能不是最简单的方法，但您始终可以用自己的模板替换 angular 的默认模板，如下所示：

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

我基本上只是复制并粘贴了原始模板并根据您的需要修改了 ng-show 条件。参见 demo。

Answer 2

no-wrap 属性应该可以满足您的需求。

示例：

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

Angular ui bootstrap 轮播：避免递归

Angular ui bootstrap carousel: avoid recursion

angularjs

angular-ui

angular-ui-bootstrap