角引导旋转木马幻灯片切换无法正常工作 [英] Angular Bootstrap Carousel Slide Transition not working correctly
问题描述
我期待使用角引导旋转木马指令在应用我建立。
我能实现它就好了，但过渡不工作怎么显示的文件中。什么应该发生的是旧形象滑出左侧，配合新的图像从右侧滑动。
我也注意到，如果你打'编辑Plunkr看code，他们使用，但奇怪的是做我在我的本地执行看到了同样的事情。
从下面的文档拍摄直接code：
angular.module（'ui.bootstrap.demo'，['ui.bootstrap ']）;\r
angular.module（'ui.bootstrap.demo'）。控制器（'CarouselDemoCtrl'，函数（$范围）{\r
$ scope.myInterval = 5000;\r
变种幻灯片= $ scope.slides = [];\r
$ scope.addSlide =功能（）{\r
VAR newWidth = 600 + slides.length + 1;\r
slides.push（{\r
图片：http://placekitten.com/'+ newWidth +'/ 300'\r
文本：['更多'，'特'，'剩余'的很多'] [slides.length％4] +''+'猫'，'Kittys，猫科动物，Cutes'] [幻灯片。长度％4]\r
}）;\r
};\r
为（变量I = 0; I＆下; 4;我++）{\r
$ scope.addSlide（）;\r
}\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=ui.bootstrap.demo＆GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js\"></script>\r
＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js\"></script>\r
＆所述; SCRIPT SRC =example.js＆GT;＆下; /脚本＆GT;\r
＆LT;链接HREF =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
\r
＆LT; DIV NG控制器=CarouselDemoCtrl＆GT;\r
＆LT; DIV的风格=高度：305px＆GT;\r
＆LT;传送带间隔=myInterval＆GT;\r
＆LT;滑动NG重复=，在幻灯片幻灯片主动=slide.active＆GT;\r
＆LT; IMG NG-SRC ={{slide.image}}的风格=保证金：汽车;＆GT;\r
＆LT; DIV CLASS =旋转木马字幕＆GT;\r
＆LT; H4＆GT;幻灯{{$指数}}＆LT; / H4＆GT;\r
＆所述p为H.; {{slide.text}}＆下; / P＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /幻灯片＆GT;\r
＆LT; /转盘＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
我所看到的是，它只是切换到新的图像，幻灯片没有，什么都没有。
什么是缺少的部分吗？它是一个错误，或者其他什么东西？
您缺少的角动画模块。你需要将它添加到你的脚本列表：
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.min.js\"></script> ;
然后进入你的模块是这样的：
angular.module（'ui.bootstrap.demo'，['ui.bootstrap'，'ngAnimate']）;
下面是nganimate的plunker在增加的一个分支： http://plnkr.co/edit/E7j7KiZmCzIg629vWTnt?p=$p$pview
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?
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
这篇关于角引导旋转木马幻灯片切换无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
