Question

我从旧版本的bootstrap（0.13.4＆amp; 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>

现在，它不会显示任何图像，除非您手动转到浏览器中的Inspector（Ctrl + Shift + I）检查代码并添加类＆＃34;活动＆＃34;用手，显示那个应该显示的图像但控制仍然没有奏效。如果您使用多个图像执行此操作，则它们将全部显示在彼此之下。

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

我希望有人可以帮助我。

谢谢你们（和女孩们）。

Answer 1

active是必需的属性，必须另行指定，否则将引发the angular error。根据{{3}}：

active（默认：第一张幻灯片的索引） - 当前活动的索引滑动。

此外，carousel-indicators指令中应省略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>

错误在Controller中，而不在视图中。

Ng-bootstrap Carousel拒绝显示图像

2 个答案: