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>
阅读 2.7k
2 个回答

ui-bootstrap-tpls.min.js版本换成0.14.3的可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进