angular 引用组件ui.bootstrap.carousel,并且依赖ngTouch,仍然不能手势滑动

发布于 2022-09-05 21:40:13 字数 2591 浏览 8 评论 0

代码如下:

<!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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

与酒说心事 2022-09-12 21:40:13

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

半山落雨半山空 2022-09-12 21:40:13

试试这个库
链接描述

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文