[英]No transition in angular ui bootstrap carousel
I've re-used the angular-based carousel here: http://codepen.io/hamzaisaac/pen/avaVYK 我在这里重新使用了基于角度的旋转木马: 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>
Controller: 控制器:
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();
}
});
It works, but I can't achieve the same transition effect in the original code: https://angular-ui.github.io/bootstrap/#carousel 它有效,但我无法在原始代码中实现相同的过渡效果: https : //angular-ui.github.io/bootstrap/#carousel
Why? 为什么? I've included all of the dependencies including Angularjs and UI Bootstrap. 我已经包含了所有的依赖项,包括Angularjs和UI Bootstrap。 Is there anything that I've missed here? 我在这里错过了什么吗?
You are missing the ng-animate dependency. 您缺少ng-animate依赖项。
angular.module('MyApp', ['ngAnimate', 'ui.bootstrap'])
If you are using bower then simply install the dependency using 如果您正在使用bower,那么只需使用安装依赖项
bower install angular-animate
OR using npm 或者使用npm
npm install angular-animate
and including the js in your index.html
并在index.html
包含js
<script src="/path/to/angular-animate/angular-animate.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.