试试这个

Question

在ui-bootstrap v2.1.4中滑动无法在Carousel中工作，而它在v1.3.3中工作正常

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

轮播docs提到支持滑动。

旋转木马还以滑动的形式为触摸屏设备提供支持。要启用滑动，请将ngTouch模块作为依赖项加载。

Plunker：https://plnkr.co/edit/odlDYR?p=preview
（为了便于滑动，可以使用QR码在移动设备上打开plunker。）

＆＃13;

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();
  }
});

＆＃13;

<!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>

＆＃13;

Answer 1

与文档相反，Carousel从v2.0.0到v2.1.4（至少）不支持滑动它在changelog

中提到

carousel：由于删除了replace：true，这会导致对轮播和幻灯片元素进行轻微的HTML结构更改 - 请参阅文档演示以了解它是如何更改的。这也导致删除了内置的ngTouch支持 - 如果使用ng-touch，则需要将ng-swipe-left和ng-swipe-right指令添加到具有相关逻辑的carousel元素。

要启用滑动，请使用template-url指定自定义模板，并在其中使用ng-swipe-*指令。 E.g。

<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工作？

2 个答案:

试试这个

使用