Нет переход в угловой Ui бутстраповской карусели

Question

Я повторно использовать карусель угловой основы здесь: http://codepen.io/hamzaisaac/pen/avaVYK

Markup:

<div ng-app="MyApp"> 
    <div ng-controller="CarouselDemoCtrl"> 
    <div style="height: 305px"> 
     <uib-carousel interval="myInterval" no-wrap="noWrapSlides"> 
     <uib-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> 
     </uib-slide> 
     </uib-carousel> 
    </div> 
    </div> 
</div> 

Контроллер:

angular.module('MyApp', ['ui.bootstrap']) 
    .controller('CarouselDemoCtrl', function ($scope) { 
    $scope.myInterval = 5000; 
    $scope.noWrapSlides = false; 
    var slides = $scope.slides = []; 
    $scope.addSlide = function() { 
    var newWidth = 1000 + slides.length + 1; 
    slides.push({ 
     image: '//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(); 
    } 
}); 

Он работает, но я не могу добиться такого же эффекта перехода в исходном коде: https://angular-ui.github.io/bootstrap/#carousel

Почему? Я включил все зависимости, включая Angularjs и UI Bootstrap. Есть ли что-нибудь, что я пропустил здесь?

Answer 1

Вам не хватает зависимости ng-animate.

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

Если вы используете беседку, то просто установить зависимость с помощью

bower install angular-animate

ИЛИ используя НПМ

npm install angular-animate

и включая JS в ваш index.html

<script src="/path/to/angular-animate/angular-animate.js"></script>