bcbeatty / ngFader

A simple, responsive and pure AngularJS fading slideshow directive that requires no jQuery!

ngFader

A simple, responsive and pure AngularJS fading slideshow directive that requires no jQuery!

Demo

You can see a working demo at the ngFader home page.

Dependencies

ngFader requires ngAnimate for the fading transitions and ngTouch for mobile swiping gestures.

ngAnimate: https://angularjs.org/
ngTouch: https://angularjs.org/

Setup Instructions

1. Link the ngFader CSS in your header:
   

\

2. Add the ngFader directive script tag in your header:
   

\<script src="js/directives/ngFader.js"></script>

3. Add 'ngFader' as a module dependancy - make sure ngAnimate and ngTouch is listed as a dependancy as well:

angular.module('yourAppModule', ['ngAnimate', 'ngTouch', 'ngFader']);

4. 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'

}]

5. Add <ng-fader></ng-fader> where you want the fader to show.
   

Donate

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!