Angular Bootstrap Carousel Slide Transition無法正常工作

我正在尋找在我正在構建的應用程序中使用Angular Bootstrap Carousel Directive。Angular Bootstrap Carousel Slide Transition無法正常工作

我能夠很好地實現它，但轉換不能如何在文檔中顯示。應該發生的是舊圖像滑向左側，新圖像從右側滑入。

我還注意到，如果您點擊'編輯Plunkr'來查看他們使用的代碼，奇怪的是做同樣的事情，我看到我的本地實現。從下面的資料爲準

直接代碼：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) { 
 
    $scope.myInterval = 5000; 
 
    var slides = $scope.slides = []; 
 
    $scope.addSlide = function() { 
 
    var newWidth = 600 + slides.length + 1; 
 
    slides.push({ 
 
     image: 'http://placekitten.com/' + newWidth + '/300', 
 
     text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4] 
 
    }); 
 
    }; 
 
    for (var i = 0; i < 4; i++) { 
 
    $scope.addSlide(); 
 
    } 
 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="CarouselDemoCtrl"> 
 
    <div style="height: 305px"> 
 
     <carousel interval="myInterval"> 
 
     <slide ng-repeat="slide in slides" active="slide.active"> 
 
      <img ng-src="{{slide.image}}" style="margin:auto;"> 
 
      <div class="carousel-caption"> 
 
      <h4>Slide {{$index}}</h4> 
 
      <p>{{slide.text}}</p> 
 
      </div> 
 
     </slide> 
 
     </carousel> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

我所看到的是，它只是切換到新的圖像，沒有幻燈片，什麼都沒有。

這裏缺失的是什麼？這是一個錯誤，還是別的？

來源

2015-05-04 Nick

您缺少角度動畫模塊。你需要將它添加到您的腳本列表：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.min.js"></script>

，然後到你的模塊，像這樣：

angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngAnimate']);

這裏是nganimate的plunker中添加的一個分支：http://plnkr.co/edit/E7j7KiZmCzIg629vWTnt?p=preview

來源

2015-05-04 00:53:12

啊哈！謝謝，這固定了它。看起來他們從文檔中的鏈接鏈接中刪除了它。 – Nick

Angular Bootstrap Carousel Slide Transition無法正常工作

回答

相關問題