This repository is no longer being supported.
A simple, responsive and pure AngularJS fading slideshow directive that requires no jQuery!
ngFader requires ngAnimate for the fading transitions and ngTouch for mobile swiping gestures.
ngAnimate:
https://angularjs.org/
ngTouch:
https://angularjs.org/
- Link the ngFader CSS in your header:
link type="text/css" rel="stylesheet" href="css/ngFader.css"- Add the ngFader directive script tag in your header:
<script src="js/directives/ngFader.js"></script>- Add 'ngFader' as a module dependancy - make sure ngAnimate and ngTouch is listed as a dependancy as well:
angular.module('yourAppModule', ['ngAnimate', 'ngTouch', 'ngFader']);- In the ngFader directive, set your timer and list your image locations in the “scope.images” array:
//Set your interval time. 4000 = 4 seconds
scope.setTime = 4000;
//List your images here.
scope.images = [{
src: 'img/slideshow/slideshow_Image_1_low.jpg',
alt: 'Add your image description here'
}, {
src: 'img/slideshow/slideshow_Image_2_low.jpg',
alt: 'Add your image description here'
}, {
src: 'img/slideshow/slideshow_Image_3_low.jpg',
alt: 'Add your image description here'
}, {
src: 'img/slideshow/slideshow_Image_4_low.jpg',
alt: 'Add your image description here'
}]- Add
<ng-fader></ng-fader>where you want the fader to show.
Github charges me a monthly fee to contribute this code to our development community. Help me cover the cost by donating via Paypal.
##Issues or Suggestions? If you would like to see some new features, have any suggestions or notice any issues, please feel free to list them in the issues section. Let's try not to have a bunch of forks with various code types if possible. I understand if there are customizations involved, but if it is generic, then let's add it to the code base. I would greatly appreciate it!