Javascript 带ng重复和ng移动的AngularJS滑块

我正在尝试使用多个图像制作一个滑块，代码可以向右移动，但向左移动时，ng move类应用于数组中的所有元素，这是不可取的

我的控制器：

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

{{slide.number}

---

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

您的代码有问题，但就在向左滑动时。基本上，您添加而不删除

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

代码如下：

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

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

---

首先将第一个元素推到数组的末尾，然后在单击Left时删除第一个元素。我尝试过这样做，但元素上的ng单击被删除，不再起作用。您好，我想这就是。splice的作用是，它从数组中提取第一个项并将其分配给一个变量，然后将.push（）放在末尾。在您的示例中，当您在幻灯片左侧多次单击时，它会断开。我目前正在我的网站上使用上面的代码，它正在工作。您始终可以在阵列中执行console.log，并查看索引的情况！