angularjs+boostrap carousel 无效
我的代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slider show</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#slides_control > div{
height: 200px;
}
img{
margin:auto;
width: 400px;
}
#slides_control {
position:absolute;
width: 400px;
left:50%;
top:20px;
margin-left:-200px;
}
</style>
</head>
<body>
<div ng-app="app">
<div ng-controller="CarouselDemoCtrl" >
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides">
<img ng-src="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
var app=angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', function($scope) {
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
})
</script>
</body>
</html>
为什么就是没有出来效果呢？麻烦各位帮忙看下要怎么改进？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你使用的angular版本和ui-bootstrap版本都太老了
我在官方示例里面也只找到了最老0.12.0版本的ui-bootstrap
我觉得是两个其中一个版本太老导致的
你先把angular的版本升级到1.2.16，如果不行再把ui-bootstrap升级到0.12.0
附上旧版本的0.12.0的示例
http://plnkr.co/edit/3qomZHFn...
bootstrap的css不需要引入一下？
修改一下：
看了一眼官方文档
怎么都感觉你的html中少了些directive。
链接：http://angular-ui.github.io/b...