个人中心
gpt4 book ai didi

angularjs - 如何使 Swipe 在 Angular-UI bootstrap Carousel 中工作？

转载 作者：行者123 更新时间：2023-12-04 05:37:09 27 4
gpt4 key购买 nike

滑动在 ui-bootstrap v2.1.4 中的 Carousel 中不起作用，而在 v1.3.3 中运行良好

新版本中是否有任何语法更改导致错误？
或者它是 UI-Bootstrap 中的错误？

旋转木马 docs提到支持滑动。

The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the ngTouch module as a dependency.



普朗克: https://plnkr.co/edit/odlDYR?p=preview
(为了方便刷卡，plunker可以在手机上用二维码打开。) 

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ui.bootstrap']);

app.controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 0;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;

  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: '//unsplash.it/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
  };

  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible"
      content="IE=edge" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.js"></script>
    <!-- v1.3.3 swipe works; v2.1.4 swipe does not work -->
    <!--<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>-->
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script>
    <script src="carousel.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
      <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{slide.id}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </div>
    </div>
  </div>
</div>
  </body>
</html>

最佳答案

与文档相反，从 v2.0.0 到 v2.1.4(至少)在 Carousel 中不支持滑动
提到是在changelog

carousel: Due to the removal of replace: true, this causes a slight HTML structure change to the carousel and the slide elements - see documentation demos to see how it changes. This also caused removal of the ngTouch built in support - if one is using ng-touch, one needs to add the ng-swipe-left and ng-swipe-right directives to the carousel element with relevant logic.



要启用滑动，请使用 template-url 指定自定义模板并使用 ng-swipe-*那里的指令。例如。 
<div class="carousel-inner"
  ng-swipe-left="$parent.vm.next()"
  ng-swipe-right="$parent.vm.prev()"
  ng-transclude>
</div>

引用: https://github.com/angular-ui/bootstrap/issues/6277

关于angularjs - 如何使 Swipe 在 Angular-UI bootstrap Carousel 中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39914961/

27 4 0
文章推荐： elasticsearch - Amazon Neptune 全文搜索 - 指定字段
文章推荐： django - letencrypt django webroot
文章推荐： debugging - WinDbg 不显示寄存器值
文章推荐： objective-c - 传入自定义选择器实现
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com