angular 引用组件ui.bootstrap.carousel,并且依赖ngTouch,仍然不能手势滑动
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap2.css">
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="CarouselDemoCtrl">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" no-pause="myPause">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id" >
<a style="display: block;">
<img ng-src="{{slide.image}}" style="margin:auto;width:100%;">
</a>
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script src="angular-touch.min.js"></script>
<script src="ui-bootstrap.min.js"></script>
<script src="ui-bootstrap-tpls.min.js"></script>
<script>
function resizeRoot(){
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 750){
deviceWidth = 750;
}
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};
resizeRoot();
window.onresize = function(){
resizeRoot();
};
angular.module('ui.bootstrap.demo',['ngAnimate','ngTouch','ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.myPause = true;
$scope.active = 0;
$scope.slides = [{
image: '02.png',
text: '111',
id: 0
},{
image: '03.png',
text: '222',
id: 1
},{
image: '04.png',
text: '333',
id: 2
}];
});
</script>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
ui-bootstrap-tpls.min.js版本换成0.14.3的可以了
试试这个库
链接描述