Ng-bootstrap 轮播拒绝显示图片

Question

我正在从旧版本 bootstrap（0.13.4 和 0.14.1）升级到新版本。

旧滑块工作正常，但在使用新文件时不再显示任何图像。这是有道理的，因为 bootstrap 的语法自那个版本以来已经发生了变化。

这是原始代码：

<div class="ecp-carousel">
    <uib-carousel interval="5000" no-wrap="false">
        <uib-slide ng-repeat="slide in e.slides " active="slide.active">
            <div class="slidcontainer clearfix">
                <img ng-src="{{slide.image}}" style="margin:auto;">
            </div>
        </uib-slide>
    </uib-carousel>
</div>

这是我想出的代码：

<div class="ecp-carousel">
    <div uib-carousel interval="5000" no-wrap="false" class="carousel-indicators">
        <div uib-slide ng-repeat="slide in e.slides" index="slide.id" class="item">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="slidcontainer clearfix">           
            </div>
        </div>
    </div>
</div>

现在，它不会显示任何图像，除非您手动转到浏览器中的检查器（Ctrl + Shift + I）检查代码并手动添加 class "active" ，对于那一张图片，应该显示。
但是控件仍然不起作用。如果您对多个图像执行此操作，它们将全部显示在彼此下方。

这是滑块的文档： https://angular-ui.github.io/bootstrap/

希望有人能帮助我。

谢谢你们（和女孩）。

Answer 1

active 是 必需的 属性，否则必须指定 the angular error will be thrown. According to the documentation:

active (Default: Index of first slide) - Index of current active slide.

此外 carousel-indicators class 应该从 uib-carousel 指令中省略，它用于轮播指示器。

固定轮播：

<div class="ecp-carousel">
        <div uib-carousel active="0" interval="5000" no-wrap="false">
            <div uib-slide ng-repeat="slide in e.slides" index="slide.id" class="item">
                <img ng-src="{{slide.image}}" style="margin:auto;">
                <div class="slidcontainer clearfix">
                </div>
            </div>
        </div>
    </div>

例子

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  $scope.e = {};
  var slides = $scope.e.slides = [];
  var currIndex = 0;

  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['Nice cat','Awesome photograph','Cute kitten','Home animals'][slides.length % 4],
      id: currIndex++
    });
  };

  

  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }

  
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
 <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app="ui.bootstrap.demo" ng-controller="CarouselDemoCtrl">

        
        <div class="ecp-carousel">
    <div uib-carousel active="0" interval="5000" no-wrap="false">
        <div uib-slide ng-repeat="slide in e.slides" index="slide.id" class="item">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="slidcontainer clearfix">           
            </div>
        </div>
    </div>
</div>

    </div>

Answer 2

问题是没有指定索引。旋转木马自行决定激活多张幻灯片，因此发生错误（它无法处理），因为它不确定要显示哪张幻灯片。（因为有多个活动幻灯片）所以轮播坏了，什么也没有显示。

这是最终的观点：

    <div class="ecp-carousel">
        <div uib-carousel interval="5000" no-wrap="false">
            <div uib-slide ng-repeat="slide in e.slides track by slide.id" index="slide.id" class="item">
                <img ng-src="{{slide.image}}" style="margin:auto;">
            </div>
        </div>
    </div>

错误在控制器中，而不是在视图中。

Ng-bootstrap 轮播拒绝显示图片

Ng-bootstrap Carousel refuses to show Images

.net

asp.net

angularjs

angular-ui-bootstrap