Angular ui bootstrap carousel not working - shows static images

Question

I've used the same sample code shown in documentation for bootstrap carousel. I've included all my dependencies. - Angular 1.5.8 - ngAnimate 1.5.8 - Bootstrap CSS 3.3.7

It works well in plunker since its the same code. But it displays all the images as static on my website one after the other. There's no animation or sliding. Any help appreciated.

controller code:

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++
 });

In your code you have to tweak it a little.

You need a new array for images and you need to specify the index, which in our case is slides.length

Hope this helps.