javascript - 使 Bootstrap 轮播指示器不可点击

Question

我正在使用高音扬声器 Bootstrap Carousel ，并且我不希望我的用户能够切换幻灯片，我想根据自己的逻辑切换幻灯片。我已经完全删除了控件，但我仍然想显示幻灯片指示器。

我怎样才能做到这一点？

最好采用 Angular 解决方案。

谢谢!

Answer 1

您可以使用 template-url 指定用于轮播的自定义模板。属性。复制默认模板并删除不需要的元素和事件。

默认模板:

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
  <div class="carousel-inner" ng-transclude></div>
  <a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1">
    <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">previous</span>
  </a>
  <a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1">
    <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">next</span>
  </a>
  <ol class="carousel-indicators" ng-show="slides.length > 1">
    <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
      <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
    </li>
  </ol>
</div>

编辑后的版本，删除了左右按钮和被动页面指示器:

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
  <div class="carousel-inner" ng-transclude></div>
  <ol class="carousel-indicators" ng-show="slides.length > 1">
    <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }">
      <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
    </li>
  </ol>
</div>

创建一个包含上述标记的新 .html 文件(或使用 template cache )并添加 template-url="[your file].html"给您<uib-carousel>元素。