Angular ui bootstrap旋轉木馬不工作 - 顯示靜態圖像

Question

我已經使用documentation中顯示的相同示例代碼作爲引導旋轉木馬。我已經包含了所有的依賴關係。 - 角1.5.8 - ngAnimate 1.5.8 - 引導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> 

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

希望這有助於。