Hey there, I've been trying to get my AngularJS image slider to work like a slideshow where the images transition smoothly from slide to slide. I managed to code the functionality for navigating to the next and previous images, but when I attempted to make it work automatically on a timer, it just didn't cooperate. I'm not sure what's causing the issue.
I utilized the $timeout service by setting a variable with a time interval, writing the code for transitioning to the next slide in a function, and then calling that function. However, it didn't quite do the trick:
function nextSlide(){
$scope.direction = 'right';
$scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
$timeout($scope.nextSlide);
}
And this is how I implemented it in my controller:
var TimeToSlide = 3000;
$timeout(nextSlide, TimeToSlide);
I set it to transition every 3 seconds.
Additionally, within my controller, I used the following service:
.controller('MyCtrl', function ($scope, $timeout) { /* My code goes here */ }
If anyone could take a look at my fiddle and offer some guidance on what steps to take next, I'd greatly appreciate it.