AngularJS slider with ng-repeat and ng-move

Question

I am trying to do a slider with multiple images and the code works for going right, but going left the ng-move class is applied to all the elements in the array which is not desirable.

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

My 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;
}

My 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

Any opinion or different way of doing it would be helpfull

push the first element to the end of the array first and then remove the first element onclick of left — sam rodrigues, Jul 10 '14 at 12:47
I tried this but the ng-click on the element is removed and does not work anymore. — Stephan Grobler, Jul 16 '14 at 07:11

score 0 · Answer 1 · answered Oct 17 '14 at 14:59

0

There is a problem with your code, but just when sliding left. Basically, you're adding without removing.

I get the first array item and I store it in a variable, I delete it from the array and then add it at the end of array.

There is the code:

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

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

answered Oct 17 '14 at 14:59

JoomCore

51
1
3

Hi, i thought that is what .splice does, it takes the first item from the array and assign it to a variable, which is then .push() onto the end. – Stephan Grobler Oct 20 '14 at 11:10
1

On your example, when you click multiple times on slide left, it breaks. I'm currently using this code above on my website and it's working. You always can do console.log in your array and see what happens with the indexes! – JoomCore Oct 23 '14 at 16:51

AngularJS slider with ng-repeat and ng-move

1 Answers1