Looking for a solution to cycle through a series of images using previous/next buttons?
The goal is to have the image dynamically change with Angular. When one of the buttons is clicked, a different image from an array in the controller should be displayed.
This is what I attempted:
HTML -
<div>
<md-button ng-click="switchImage(-1)"> Prev Image </md-button>
<img ng-src="assets/img/{{image}}"/>
<md-button ng-click="switchImage(1)"> Next Image </md-button>
</div>
Javascript/Angular -
// Array of character images
var self = this;
self.images = ['image1.gif', 'image2.gif', 'image3.gif', 'image4.gif'];
self.index = 0;
$scope.image = self.images[self.index]; // Display the first image
function switchImage(step) {
self.index += step;
$scope.image = self.images[self.index];
};
Seeking advice on a more effective approach to achieve this functionality?
The current setup does not update the image when the buttons are clicked. I verified that the switchImage function is not being called by placing a breakpoint and clicking the buttons.