如何在 Angular-UI bootstrap Carousel 中使用 Swipe？

Question

滑动在 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>

Answer 1

与文档相反，从 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

Answer 2

试试这个

我们更改活动幻灯片范围变量的另一种方法。

正在使用

Angular 1.6.6
ngTouch 1.6.6
UI Bootstrap 2.5.0

模板

<div uib-carousel active="active" class="carousel-inner" role="listbox" interval="myInterval" no-wrap="noWrapSlides"
            ng-swipe-left="changeSlide('left')"
            ng-swipe-right="changeSlide('right')">
            <div uib-slide ng-repeat="slide in slides" class="wrapper">
                <div style="position:relative;">
                    <img class="img-responsive" ng-src="{{slide.url}}"></div>
                </div>
            </div>
        </div>
    </div>

控制器

$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
$scope.slides = [{url: 'image1.jpeg'},{url: 'image2.jpg'}];

$scope.changeSlide = function (direction) {
    var index = $scope.active;
    if (direction === 'right') {
        $scope.active = (index <= 0 ? 0 : index - 1);
        return;
    }
    if (direction ==='left') {
        $scope.active = (index >= ($scope.slides.length - 1) ? ($scope.slides.length - 1) : index + 1);
        return;
    }
};

如何在 Angular-UI bootstrap Carousel 中使用 Swipe？

How to make Swipe work in Angular-UI bootstrap Carousel?

swipe

angularjs

angular-ui-bootstrap

试试这个

正在使用