Simple image and content slider on AngularJS

To date, the network has a lot of ready-made solutions that implement one way or another to change slides. Most of them are based on javascript animation. In this article I want to show what possibilities AngularJS offers in conjunction with CSS3. I set myself the task of making a minimalistic and simple module that is easy to add and modify to fit my needs, up to creating my own slide transition effects.

GitHub Project demo

Slide change

To begin with, we will display all the slides, on AngularJS this is done simply with the help of the ng-repeat directive:

 //      $scope.slides = [ { 'image': 'images/image1.png' }, { 'image': 'images/image2.png' } ]; 

in html template:

 <div ng-repeat="(i, slide) in slides"> <img ng-src="{{ slide.image }}" /> </div> 

As a result, we have a code that displays all the slides (in this example, the images). Now we need to force them to successively change after some intervals, but in AngularJS there is no analogue to the setInterval function, therefore, to implement the perpetual timer, we will cyclically call $timeout . To stop this timer, you need to use the $timeout.cancel function.

 //    $scope.next = function() { var total = $scope.slides.length; if (total > 0) { $scope.$slideIndex = ($scope.$slideIndex == total - 1) ? 0 : $scope.$slideIndex + 1; } }; //  play  ,         $scope.play = function() { timeOut = $timeout(function() { $scope.next(); $scope.play(); }, 2000); }; 

Now add a code in the template that will display only the current slide:

 <div ng-repeat="(i, slide) in slides" ng-show="i == $slideIndex"> <img ng-src="{{ slide.image }}" /> </div> 

If we execute this code, we will have a slider that changes the image every 2 seconds, but without any effects.

Slide transition effects

For the animation of elements in AngularJS, a separate ngAnimate module is responsible. It is enough to connect this module and describe the effects of transitions in the css slides will gradually replace each other. An example of the effect of manifestation:

 .animation-fade.ng-hide-add, .animation-fade.ng-hide-remove { /*        */ -webkit-transition: 1s linear all; -moz-transition: 1s linear all; -o-transition: 1s linear all; transition: 1s linear all; display: block !important; } .animation-fade.ng-hide-add, .animation-fade.ng-hide-remove.ng-hide-remove-active { /*           */ opacity: 1; } .animation-fade.ng-hide-add.ng-hide-add-active, .animation-fade.ng-hide-remove { /*           */ opacity: 0; position: absolute; } 

Now, all slides that have an animation-fade class will have a animation-fade effect on transitions.
The ngAnimate module allows you to describe effects not only through css, but also through javascript, which allows you to implement more complex animations and bring it closer to those of analogs, for example, in nivoSlider.
')

Conclusion

In this article I reviewed only the basic principles that were the basis of this module . The module itself currently has the functionality of auto-play, changing the delay between slides, the ability to add elements of manual scrolling of slides and the ability to set animations for each slide separately. I hope the module will be useful to someone and will be grateful for any help in its development.