Угловая бутстрап Карусель Слайд-переход не работает правильно

Я ищу, чтобы использовать Angular Bootstrap Carousel Directive в приложении, которое я строю.Угловая бутстрап Карусель Слайд-переход не работает правильно

Я могу реализовать его просто отлично, но переход не работает, как это показано в документации. То, что должно происходить, - это то, что старое изображение скользит влево, а новое изображение скользит справа.

Я также заметил, что если вы нажмете «Edit 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']);

Вот вилка plunker с nganimate добавленным в: http://plnkr.co/edit/E7j7KiZmCzIg629vWTnt?p=preview

источник

2015-05-04 00:53:12

Aha! Спасибо, это исправлено. Похоже, что они оставили это в ссылке plunker из документации. – Nick

Угловая бутстрап Карусель Слайд-переход не работает правильно

ответ

Смежные вопросы