javascript - 带有 ng-repeat 和 ng-move 的 AngularJS slider

Question

我正在尝试制作一个包含多个图像的 slider ，并且代码适用于向右移动，但是向左移动 ng-move 类应用于数组中的所有元素，这是不可取的。

我的 Controller :

$scope.slides = [
{image: 'http://lorempixel.com/121/75/transport/', number: 1},
{image: 'http://lorempixel.com/131/75/transport/', number: 2},
{image: 'http://lorempixel.com/122/75/transport/', number: 3}
];

$scope.slide = function(dir){

            var vehArr = $scope.slides,
                vehicle = {};
            if (dir === 'left') {
              vehicle = vehArr.splice(0,1);
            //  vehicle = vehArr.shift();
                vehArr.push(vehicle);
            } else {
                vehicle = vehArr.pop();
                vehArr.unshift(vehicle);
            }
}

我的CSS:

.slider {
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.slide {
  float: left;
  height: 100px;
}

.slide.ng-move, .slide.ng-enter, .slide.ng-leave {
  -webkit-transition: 1s ease all; 
  transition: 1s ease all; 
}

.slide.ng-move,
.slide.ng-enter, 
.slide.ng-leave.ng-leave-active{
  margin-left: -150px;
}
.slide.ng-enter, 
.slide.ng-leave,
.slide.ng-move.ng-move-active {
  margin-left: 0px;
}

我的 HTML:

<div ng-controller="sliderCtrl">

  <div class="slider">
    <div class="slide slide-animation" ng-repeat="slide in slides">
      <img ng-src="{{slide.image}}" alt=""> <br>
      {{slide.number}}
    </div>
  </div>
  <a href ng-click="slide('left')">Left</a>
  <a href ng-click="slide('right')">Right</a>

</div>

http://plnkr.co/edit/rJfOH9zxJLGf4rKPJtS4?p=preview

任何意见或不同的做法都会有所帮助

Answer 1

你的代码有问题，只是左滑的时候。基本上，您是在添加而不是删除。

我得到第一个数组项并将它存储在一个变量中，我从数组中删除它然后将它添加到数组的末尾。

有代码:

if (dir === 'left') {
    first_item = vehArr[0];
    vehArr.shift();
    vehArr.push(first_item);

} else {
    vehicle = vehArr.pop();
    vehArr.unshift(vehicle);
}