CODEWITHSUNDEEP
angularjstwitter-bootstrapcarousel
Jack
Jack

Reputation: 329

Carousel image transition does not work (ui.bootstrap.carousel)

I am trying to use the angular-ui bootstrap carousel (reference at http://angular-ui.github.io/bootstrap/). My problem is that the transition does not work, the image just appear/disappear instead of moving from right to left as the demo.

I am using Chrome version 43.0

HTML:

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
Testing
<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <carousel interval="myInterval" no-wrap="noWrapSlides">
      <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 class="row">
    <div class="col-md-6">
      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</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>
  </body>
</html>

The example.js:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + 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();
  }
});

Many thanks

Upvotes: 0

Views: 1327

Answers (1)

Leopold Kristjansson
Leopold Kristjansson

Reputation: 2784

The solution is to add ng-animate as a dependency. Like this:

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

You need to link to the script as well of course.

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

Here is a Plunker where it is working (not from me though).

However, adding ngAnimate as a dependency might also break your slider/carousel - Catch 22!

If that happens, read this thread and try using a different Angular version.

EDIT: using version 1.3.13 of both Angular and ng-Animate works for me - just tried it in a project - whereas using a version mismatch does not work.

Upvotes: 2

Related Questions