Angular js制作具有无限效果的滑块答案

【问题标题】：Angular js make slider with infinite effectAngular js制作具有无限效果的滑块
【发布时间】：2015-05-13 08:02:42
【问题描述】：

我创建了一个简单的照片滑块，但我不知道如何使这个无限。我怎样才能用有角度的方式产生这种效果，请帮忙。我不想使用 jquery，但如果它是唯一的方法，那么无论如何。

var app = angular.module('stack', []);

app.controller('MainCtrl', function($scope) {
  $scope.images = ["http://lorempixel.com/600/200/sports/", "http://lorempixel.com/600/200/city/",
    "http://lorempixel.com/600/200/nature/"
  ];
  $scope.index = 0;
  var IMG_WIDTH = -600;
  $scope.next = function() {

    ++$scope.index;
    if ($scope.images.length <= $scope.index) {
      $scope.index = 0;
    }

    var pos = ($scope.index > 0) ? $scope.index * IMG_WIDTH : 0;

    $scope.listPosition = {
      transform: "translateX(" + pos + "px)"
    };

  }

  $scope.prev = function() {
    --$scope.index;
    if ($scope.index < 0) {
      $scope.index = $scope.images.length - 1;
    }

    var pos = ($scope.index > 0) ? $scope.index * IMG_WIDTH : 0;

    $scope.listPosition = {
      transform: "translateX(" + pos + "px)"
    };

  }
});

.mt {
  margin-top: 2em;
}
.outer {
  max-width: 600px;
  overflow: hidden;
}
.slider {
  width: 90000px;
  position: relative;
  transition: all 1s;
}
.slider div {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

<body ng-app="stack" ng-controller="MainCtrl">
  <div class="container-fluid">
    <div class="row mt">
      <div class="col-sm-6 col-sm-push-3">
        <div class="outer clearfix">
          <div class="slider clearfix" ng-style="listPosition">
            <div ng-repeat="image in images track by $index">
              <img ng-src="{{image}}" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="btn btn-default" ng-click="next()">Next</a>
  <a class="btn btn-default" ng-click="prev()">Prev</a>
  <div></div>
</body>

【问题讨论】：

标签： javascript jquery css angularjs

【解决方案1】：

最简单的方法是改组$scope.images 数组。

转换完成后，禁用它们，方法是创建类似 .no-transition 的类并将其添加到滑块中，或者通过您可以想象的任何其他方式
$scope.images.push($scope.images.shift()) 应该将第一个项目放在最后一个位置，$scope.images.unshift($scope.images.pop()) 应该将其反转。
之后，您可能需要重新调整变换值并重新应用过渡

希望对您有所帮助。

【讨论】：

但是我在哪个阶段做这些事情？我真的很感激一个我迷路的例子。
我没有时间提供完整的示例，但是您应该分别在$scope.next 和$scope.prev 中的sn-ps 上方。试着只放这两个（没有其余的代码），看看会发生什么，它会更清楚。如果您无法弄清楚，请发表评论，我会做一个简短的例子，但我怀疑它是否有必要:)
我不能让它工作，我更新了plunker请看看，plnkr.co/edit/irF7jMIQvb0dtcyxpF4I?p=preview
plnkr.co/edit/qWsQHMp3VpdKWcu2YoEA?p=preview 这将说明我的想法，我认为这是一个非常简单的解决方案。这样，只有 $images 数组中的第一张幻灯片是可见的，并且您对位置的计算要少得多，因为它可以向左或向右偏移一张幻灯片。我会一直做到这一点，但目前我的时间很短，很抱歉
我会将此标记为答案，但我没有成功添加过渡。