我使用了documentation中所示的示例代码来进行引导轮播。我已经包括了所有依赖项。
-角度1.5.8
-ngAnimate 1.5.8
-Bootstrap CSS 3.3.7

由于代码相同,因此在plunker中效果很好。但是它将所有图像以静态显示在我的网站上。没有动画或滑动。任何帮助表示赞赏。

控制器代码:

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>

最佳答案

 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

希望这可以帮助。

关于css - Angular UI Bootstrap轮播无法正常工作-显示静态图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42396638/

10-12 12:58
查看更多