Currently in the process of creating a slideshow using AngularJS, similar to the one found at this link, which includes navigation arrows (next and prev).
Here is the HTML code snippet:
<div class="carousel">
<div class="left"><input type="button" value="Back" ng-click="slideBack()" ng-disabled="currentSlide == 0" /></div>
<div class="content">
<div class = "slide" ng-repeat="img in imgs | startFrom:currentSlide | limitTo:slidesSize" ng-animate="{enter: 'animate-enter', leave: 'animate-leave', move: 'animate-move'}">
<img ng-src="{{img.url}}" />
</div>
</div>
<div class="right"><input type="button" value="Next" ng-click="slideNext()" ng-disabled="currentSlide+slidesSize >= imgs.length" /></div>
</div>
The relevant CSS code can be seen below:
.animate-enter, .animate-move, .animate-leave
{
-webkit-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.animate-enter {
left: 400px;
position:relative;
opacity: 0;
}
.animate-enter.animate-enter-active {
left: 0px;
opacity: 1;
}
.animate-move {
position:relative;
}
.animate-move.animate-move-active{
left: -200px;
}
.animate-leave {
left: 0;
}
.animate-leave.animate-leave-active{
left: -100%;
position:absolute;
}
Filter implementation for the slideshow:
angular.module('carouselFilters', []).filter('startFrom', function() {
return function(input, start) {
start = +start;
return input.slice(start);
}
});
Controller handling the slideshow functionality:
function carouselCtrl($scope, $http) {
$scope.currentSlide = 0;
$scope.slidesSize = 3;
$http.get('carousel_images.json').success(function(data) {
$scope.imgs = data;
});
$scope.slideNext = function(){
$scope.currentSlide++;
}
$scope.slideBack = function(){
$scope.currentSlide--;
}
}
The animate-enter and animate-leave transitions are functioning properly, however, experiencing issues with the animate-move transition. Any suggestions or ideas would be greatly appreciated.
Thank you.