I implemented a carousel slider in Angular utilizing ng-repeat with orderBy:'id'. However, I encountered an issue where the id changes when clicking the next slide button.
Check out my JSFiddle here
Within a div, I have ng-repeat:
<div class="slide" ng-repeat="slide in slides | orderBy:'id*1'">
<p>
{{ slide.value.name }}
</p>
</div>
In addition, I've created a function to sort the new item list:
$scope.nextSlide = () => {
let items = $scope.slides
let countItems = items.length
for (let i = 0; i < countItems; i++) {
let z = items[i].id % countItems;
items[i].id = z + (countItems - 1);
}
}
The problem I'm facing is that the animation occurs first, followed by reordering of the scope and a blink to the new slide. Any suggestions on how to animate reordering in ng-repeat?