Angular next and prev navigation math logic

Question

This is probably a piece of cake for you math gurus. The prevSlide goes back fine 3-2-1-3-2... etc. Regardless of the point of entry. But the nexSlide starts out 1-2-3 and then it just 2-3-2-3...I'm sure it's my math

$scope.currentIndex = 0;
$scope.setCurrentSlideIndex = function (index) {
    $scope.currentIndex = index;
};
$scope.isCurrentSlideIndex = function (index) {
    return $scope.currentIndex === index;
};
$scope.prevSlide = function () {
    $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
};
$scope.nextSlide = function () {
    $scope.currentIndex = ($scope.currentIndex < $scope.slides.length -1) ? ++$scope.currentIndex : 1;
};

Help!

Brian Glaz · Accepted Answer · 2016-11-07 20:21:42Z

1

$scope.nextSlide = function () {
    $scope.currentIndex = ($scope.currentIndex < $scope.slides.length -1) ? ++$scope.currentIndex : 0;
};

You just need to change the 1 to a 0 at the end of this line. index 1 as you have it now is actually the 2nd slide.

Slide #: 1 -- 2 -- 3
Index #: 0 -- 1 -- 2

answered Nov 7, 2016 at 20:21

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LOTUSMS Over a year ago

Golden! Thanks a lot!

spencer.sm · Accepted Answer · 2016-11-07 20:14:13Z

1

You'll have to change to match your context but the logic in the functions previous() and next() below might help.

var numSlides = 3;

function previous(current){
  current--;
  return current >= 0 ? current : numSlides;
}

function next(current){
  current++;
  return current <= numSlides ? current : 0;
}

answered Nov 7, 2016 at 20:14

spencer.sm

20.8k10 gold badges86 silver badges98 bronze badges

2 Comments

soote Over a year ago

You can always use the modulo (%) operator for any clock arithmetic. return (++current) % numSlides

LOTUSMS Over a year ago

This is a good solution for pure javascript, but the other answer helped me better since it's still angular and didn't require a lot to make it work. Besides, I can't hardcode the amount of slides. It must remain dynamic i case the user adds more than 3 slides to the component. But I did +1 your answer. Thanks!

Collectives™ on Stack Overflow

Angular next and prev navigation math logic

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related