This tutorial was written for EasySlider 1.7, if you are using a different version this may not apply.

Looking for instructions for SudoSlider?

EasySlider is pretty awesome. You just chuck it in, tell it what container to slide with and you're all good to go. It's definitely my go-to slider when working on new projects. When implementing it on a recent project there was only one thing missing: Keyboard navigation. I'm a huge fan of keyboard navigation, probably just because I'm really lazy and I'm always impressed when I can move things about using my arrow keys. Luckily for me, keyboard navigation is super simple to add, and Alen kindly provides the non-minified code so we can hack away and customise to our liking!

Firstly, open up the non-minified version and find the this.each function:

this.each(function() {

Directly under that, simply paste in the following code chunk:

// Keypress Listeners
function checkKey(e){
switch (e.keyCode) {
case 37:
e.preventDefault();
animate("prev",true);
break;
case 39:
e.preventDefault();
animate("next",true);
break;
default:
}
}
// Keypress Listener Support
if ($.browser.mozilla) {
$(document).keypress(checkKey);
} else {
$(document).keydown(checkKey);
}

You're all set! The CheckKey function keeps an eye out for any keystrokes. If it finds key "37" (left arrow) it triggers the previous slide animation to start. If it finds key "39" (right arrow) it triggers the next slide.

But David, you say. What If I only want keyboard navigation on some pages and not others? Well you, I say, simply make it an option. Now if you've never looked at a jQuery plugin before this might be a little scary, but we can simply add an option that we can pass a true/false setting to when we call our script. Look for this code:

$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',	

Go to the end of the list of options, it should be numericId: false. You'll probably notice that every option has a comma at the end, except for the last one. Add a comma to the end of this line and create a new line. On the new line, add the following: keyboard: false

Your options code should now look something like this:

// default configuration properties
var defaults = {
prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',
nextText: 		'Next',
controlsShow:	true,
controlsBefore:	'',
controlsAfter:	'',
controlsFade:	true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',
lastText: 		'Last',
lastShow:		false,
vertical:		false,
speed: 			800,
auto:			false,
pause:			2000,
continuous:		false,
numeric: 		false,
numericId: 		'controls',
keyboard:		false
}; 

Now go back to the code you added earlier. Before the checkKey function, add: if(options.keyboard) {, then at the bottom of the new code (below both the checkKey function and the keyboard listener support section, add a curly bracket: }.

Your checkKey code should look like this:

if(options.keyboard) {
// Keypress Listeners
function checkKey(e){
switch (e.keyCode) {
case 37:
e.preventDefault();
animate("prev",true);
break;
case 39:
e.preventDefault();
animate("next",true);
break;
default:
}
}
// Keypress Listener Support
if ($.browser.mozilla) {
$(document).keypress(checkKey);
} else {
$(document).keydown(checkKey);
}
}

That's it! You've added your option! What this does is it checks if the option "keyboard" is true and if it is it runs the code in the brackets. Remember how we set the option to default to false? Well, we'll now need to call the slider with the option set to true:

$(".homepageSliderWrapper").easySlider({
continuous: true,
prevId: "largePrev",
nextId: "largeNext",
keyboard: true
});

Now go to the page your slider is on and press your left/right arrows and watch that baby slide!

Alternatively, you can set the keyboard option to default to true, and on the pages you don't want it to be on, call it as false.

SudoSlider

SudoSlider is based on EasySlider and as such it's a pretty easy to adapt these instructions to SudoSlider. All you need to do is change the "animate" calls to "goToSlide".

// Keypress Listeners
function checkKey(e){
switch (e.keyCode) {
case 37:
e.preventDefault();
animate("prev",true);
break;
case 39:
e.preventDefault();
animate("next",true);
break;
default:
}
}

To:

// Keypress Listeners
function checkKey(e){
switch (e.keyCode) {
case 37:
e.preventDefault();
goToSlide('prev', true);
break;
case 39:
e.preventDefault();
goToSlide('next', true);
break;
default:
}
}