angular.js - angularjs+boostrap carousel 无效
本文介绍了angular.js - 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>
为什么就是没有出来效果呢？麻烦各位帮忙看下要怎么改进？
解决方案
你使用的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...
这篇关于angular.js - angularjs+boostrap carousel 无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
