Keyboard navigation #16

README.md

@@ -115,7 +115,8 @@ in your CSS.
 |interval|`4000`|Time (in ms) to wait before changing to the next slide|
 |transitionDuration|`700`|Duration (in ms) of animated transition|
 |effect|`'slide'`|Transition effect (slide/fade by default)|
-|disableNav|`false`|Disables the previous/next navigation|
+|disableNav|`false`|Toggle the previous/next navigation (also disables touch and keyboard navigation)|
+|keyboardNav|`true`|Toggle keyboard navigation|
 |previousNavSelector|`''`|Selector for custom previous nav element|
 |nextNavSelector|`''`|Selector for custom next nav element|
 |classes|`{...}`|List of classes to be used by slider. Probably shouldn't be changed|
@@ -170,7 +171,7 @@ Ideal Image Slider has been tested on:
 * Firefox
 * Safari (Desktop + Mobile)
 * Opera
-* IE9
+* IE9+
 
 ## Contribute
 

ideal-image-slider.js

@@ -276,6 +276,7 @@ var IdealImageSlider = (function() {
 			transitionDuration: 700,
 			effect: 'slide',
 			disableNav: false,
+			keyboardNav: true,
 			previousNavSelector: '',
 			nextNavSelector: '',
 			classes: {
@@ -390,16 +391,16 @@ var IdealImageSlider = (function() {
 
 			_addClass(previousNav, this.settings.classes.previousNav);
 			_addClass(nextNav, this.settings.classes.nextNav);
-			previousNav.addEventListener('click', (function(){
+			previousNav.addEventListener('click', function(){
 				if(_hasClass(this._attributes.container, this.settings.classes.animating)) return false;
 				this.stop();
 				this.previousSlide();
-			}).bind(this));
-			nextNav.addEventListener('click', (function(){
+			}.bind(this));
+			nextNav.addEventListener('click', function(){
 				if(_hasClass(this._attributes.container, this.settings.classes.animating)) return false;
 				this.stop();
 				this.nextSlide();
-			}).bind(this));
+			}.bind(this));
 
 			// Touch Navigation
 			if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch){
@@ -411,6 +412,23 @@ var IdealImageSlider = (function() {
 				sliderEl.addEventListener('touchmove', _touch.move.bind(this), false);
 				sliderEl.addEventListener('touchend', _touch.end.bind(this), false);
 			}
+
+			// Keyboard Navigation
+			if(this.settings.keyboardNav){
+				document.addEventListener('keyup', function(e){
+					e = e || window.event;
+					var button = (typeof e.which == 'number') ? e.which : e.keyCode;
+					if (button == 37) {
+						if(_hasClass(this._attributes.container, this.settings.classes.animating)) return false;
+						this.stop();
+						this.previousSlide();
+					} else if (button == 39) {
+						if(_hasClass(this._attributes.container, this.settings.classes.animating)) return false;
+						this.stop();
+						this.nextSlide();
+					}
+				}.bind(this));
+			}
 		}
 
 		// Create internal attributes