Angular Bootstrap Carousel Slide Transition not working correctly

问题

I am looking to use the Angular Bootstrap Carousel Directive in an application I am building.

I am able to implement it just fine, but the transition isn't working how it shows in the documentation. What should be happening is the old image slides out to the left, with the new image sliding in from the right.

I also noticed that if you hit 'Edit Plunkr' to see the code they used, it is strangely enough doing the same thing I am seeing on my local implementation.

Direct code taken from their documentation below:

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>

What I am seeing is that it just switches to the new image, no slide, no nothing.

What is the missing piece here? Is it a bug, or something else?

回答1:

You are missing the angular animate module. You need to add it to your scripts list:

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

and then into your module like this:

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

Here is a fork of the plunker with nganimate added in: http://plnkr.co/edit/E7j7KiZmCzIg629vWTnt?p=preview

来源：https://stackoverflow.com/questions/30021084/angular-bootstrap-carousel-slide-transition-not-working-correctly

标签

angularjs

angular-bootstrap