There are a multiple of instances when we want to give a user more control over the navigation of a slider by providing alternate means to navigate.

One of these ways is to make the slider navigate upon key events and this is what we will explore in this chapter.

Understanding the event

The way key events will work in your slide, is that upon pressing the right arrow key navigation will be performed to the to right whereas for the left arrow key it will be performed to the left, similar to the working of the navigation buttons.

The event we will be using for this purpose is keydown. The reason will be shown later in this section.

The check for the right or left arrow keys will be done using the property keyCode whereas the navigation will be accomplished using the same old navigateSlider() function.

Depending on the arrow key pressed, counter will be incremented or decremented to maintain the flow of navigation just like we did with the left and right buttons.

So all explanation taken care of, let's now program for key events:

window.onkeydown = function(e) {
    if (e.keyCode == 37)
        counter === 0 ? (counter = len - 1) : counter--; // left arrow key
    else if (e.keyCode == 39)
        (counter === len - 1) ? (counter = 0) : counter++; // right arrow key
    navigateSlider();
}

Explanation of code.......

Here we give the keydown event to window so that we don't have to point or focus anywhere before getting our keyboard events tracked. The reason for using keydown and not keyup is the fact that with the former a user can hold on to a key and get the event execute repeatedly. For our slider this could mean holding on to the left/right keys and navigating our slider quickly.

Moving forward the first conditional e.keyCode == 37 checks for the left keypress and consequently decrements counter (line 3). Similarly e.keyCode == 39 checks for the right keypress and consequently increments counter (line 5).

Both these cases are preceded by further conditionals to check for the extreme slides and make sure that the slider's navigation does not break. Recall these statements from the Simple Slider chapter - they are exactly the same here as well.

Lastly after counter is altered we call navigateSlider() to perform the navigation. And with this we have a fully working key-based slider.

Key Slider

Adding a bit of spice

In this code you can optionally add a boolean variable and another condition to check for it at the time of the occurrence of the event, to enable key navigation after some condition is met.

What this means is the following:

var enableKeyEvent = false;
/* code that sets enableKeyEvent to true */

window.onkeydown = function(e) {
    if (enableKeyEvent) {
        if (e.keyCode == 37)
            counter === 0 ? (counter = len - 1) : counter--; // left arrow key
        else if (e.keyCode == 39)
            (counter === len - 1) ? (counter = 0) : counter++; // right arrow key
        navigateSlider();
    }
}

If enableKeyEvent is set to true, it means that you have allowed key events to navigate your slider back and forth. However, if it is set to false then nothing will be navigated on any key event.

The question is: what is this spice for? Why will anyone even need to do this?

Well, this add-on can be useful for cases where you want some special conditions to be met before enabling key navigation of your slider. These special conditions can be a fullscreen mode gallery, a slider coming into the viewport and so on.

Anyways, this completes all the concepts in this sliders tutorial. In the next and final chapter we will bring all these concepts together under one tree by constructing a fully-functional cross-browser compatible slider JavaScript library.