I am currently working on creating a carousel component using AngularJS inspired by this particular example that I stumbled upon on stackoverflow.
The next function is functioning correctly, but when attempting to implement the previous function, it starts cycling into negative values once it reaches 0, going all the way to -3 before jumping back to 0.
Could someone provide an explanation of what % $scope.pages.length exactly does and how it operates? I attempted to search online for answers but could not find any comprehensive explanations.
This is my controller:
.controller('portfolioController', function($scope) {
$scope.pages = [
{
image: "/../images/Placeholder.jpg",
alt: "thumbnail first page",
name : "1",
description : "My First Webpage",
active : 1
},
{
image: "/../images/Placeholder.jpg",
alt: "thumbnail first page",
name : "2",
description : "My Second Webpage",
active : 0
},
{
image: "/../images/Placeholder.jpg",
alt: "thumbnail first page",
name : "3",
description : "My Third Webpage",
active : 0
},
{
image: "/../images/Placeholder.jpg",
alt: "thumbnail first page",
name : "4",
description : "My Fourth Webpage",
active : 0
}
];
$scope.current = 0;
$scope.Next = function() {
$scope.current = ($scope.current + 1) % $scope.pages.length;
}
$scope.Previous = function() {
$scope.current = ($scope.current - 1) % $scope.pages.length;
}
});
This is my html:
<div class="col-xs-12">
<div class="thumbnail">
<img ng-src="{{ pages[current].image }}" alt="{{ pages[current].alt }}">
<div class="caption">
<h3>{{ pages[current].name }}</h3>
<p>{{ pages[current].description }}</p>
</div>
</div>
<div class="row carousel-thumbnails">
<div class="col-xs-12">
<div class="btn btn-info" ng-click="Previous()">Previous</div>
<img ng-repeat="img in pages" ng-class="{'active': img.active}" src="{{ img.image }}" alt="{{ img.alt }}">
<div class="btn btn-info" ng-click="Next()">Next</div>
</div>
</div>
</div>