css - Angular ui bootstrap 轮播不工作 - 显示静态图像

Question

我使用了 documentation 中显示的相同示例代码用于引导轮播。我已经包括了我所有的依赖项。- Angular 1.5.8- ngAnimate 1.5.8- 引导 CSS 3.3.7

它在 plunker 中运行良好，因为它的代码相同。但它在我的网站上一个接一个地显示所有静态图像。没有动画或滑动。任何帮助表示赞赏。

Controller 代码:

import CarouselController from 'carousel/CarouselController';
import 'angular-ui-bootstrap';
import 'angular-animate';
import 'angular-sanitize';

let moduleName = angular
    .module('Carousel', ['ui.bootstrap'])
    .controller('CarouselController', CarouselController)
    .name;

export default moduleName;
-----------------------------------------------------
function CarouselController($scope){
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.active = 0;
    var slides = $scope.slides = [];
    var currIndex = 0;

    $scope.addSlide = function() {
        var newWidth = 600 + slides.length + 1;
        slides.push({
            image: '//unsplash.it/' + newWidth + '/300',
            text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
            id: currIndex++
        });
    };

    $scope.randomize = function() {
        var indexes = generateIndexesArray();
        assignNewIndexesToSlides(indexes);
    };

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

    // Randomize logic below

    function assignNewIndexesToSlides(indexes) {
        for (var i = 0, l = slides.length; i < l; i++) {
            slides[i].id = indexes.pop();
        }
    }

    function generateIndexesArray() {
        var indexes = [];
        for (var i = 0; i < currIndex; ++i) {
            indexes[i] = i;
        }
        return shuffle(indexes);
    }

    // http://stackoverflow.com/questions/962802#962890
    function shuffle(array) {
        var tmp, current, top = array.length;

        if (top) {
            while (--top) {
                current = Math.floor(Math.random() * (top + 1));
                tmp = array[current];
                array[current] = array[top];
                array[top] = tmp;
            }
        }

        return array;
    }
}

export default [ '$scope', CarouselController ];

HTML:

<div ng-controller="CarouselController">
    <div style="height: 305px">
        <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
            <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                <img ng-src="{{slide.image}}" style="margin:auto;">
                <div class="carousel-caption">
                    <h4>Slide {{slide.id}}</h4>
                    <p>{{slide.text}}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
            <button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="noWrapSlides">
                    Disable Slide Looping
                </label>
            </div>
        </div>
        <div class="col-md-6">
            Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
            <br />Enter a negative number or 0 to stop the interval.
        </div>
    </div>
</div>

Answer 1

 slides.push({
            image:['pathToImage', 'pathToImage1', 'pathToImageN'][slides.length],
            text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
            id: currIndex++
 });

在您的代码中，您必须稍微调整一下。

你需要一个新的图像数组，你需要指定索引，在我们的例子中是 slides.length

希望这对您有所帮助。