Creating a jQuery Slideshow: Adding Arrow Navigation

jQuery Slideshow | Programmers

slideshowArrowsIn this post series we’re creating a jQuery Slideshow from scratch. In the last post we created the basic slideshow functionality of iterating through each image in an array. In this post we’ll be adding navigational arrows.

Note: Any function not defined here was in the previous post or the entire code can be found in the jsFiddle at the bottom.

jQuery Slideshow Tutorials

[list_category name=”jQuery Slideshow”]

Types of Navigation

There are several types of navigation in typical jQuery slideshows. This week we’re applying arrow navigation which is essentially clicking a button to move forward/backward one in the slideshow.

Option two is adding a button for each image/slide in the slideshow which allows you to jump to any image. A variation is adding thumbnails instead of buttons to navigate.

Of the two main options for navigation, the arrows are the easiest to implement, so that’s what we’re starting with here.

Create the Arrows

Of course we’ll first need images for our arrows. If you’d like, you can simply right-click on these arrows and save it to use on your slideshow:

Clearing the setInterval

When we use arrows for navigation, you’ll want to get rid of the automatic slideshow movement or you’ll get some weird results. Change the setInterval that we did last post to:

beginNow = setInterval(forwardImage, 4000);

With the interval now in a variable, we’ll be able to clear it later on in the code.

Adding the Right Arrow Functionality

In the last post we created a function that controlled the slideshow moving forward one image. We’ll be attaching that functionality to the right hand arrow here.

We won’t be doing any CSS for the arrows in this post. So for now, just add the arrows underneath the images.

First, add an ID to the right hand arrow image:

<img src='arrowR.jpg' id='rightArrow' />

We’ll then connect it to the function using jQuery and use the built-in clearInterval function to get rid of the automatic image changing.

$('#rightArrow').click(function() {
clearInterval(beginNow);
forwardImage();
});

The function forwardImage() is defined in Creating a jQuery Slideshow from Scratch – Part 1. You can also find the entire coding in the jsfiddle at the bottom of this post.

Adding the Left Arrow Functionality

We’ll first add an ID:

<img src='arrowL.jpg' id='leftArrow' />

Then connect it to the function we’ll be adding below:

$('#leftArrow').click(function() {
clearInterval(beginNow);
backwardsImage();
});

What we’ll need now is a function for going backwards in the slideshow. We’ll basically be using the functions from before and simply editing a few items.

//This function will move the slideshow backwards one
function backwardsImage() {
currentImageKey();
if (i == 0) {
changeImage(images.length - 1);
} else {
changeImage(i - 1);
}
}

We’re getting the current image using the currentImageKey() function (defined in the previous post). Then we’ll check to see if the current image, stored in variable i that we received back from the currentImageKey() function, is equal to 0. In the forward function we tested to see if the image was the last one, but here, we’ll test to see if it’s the first one. If it is, then we’ll switch to the last image in the slideshow. If it isn’t, we’ll subtract one from i to get the image one to the left of the current one.

Optional: Removing Arrows With No Functionality

In a slideshow you have the option to either allow the users to cycle from image 1 to the last image and vice versa, or make both the image 1 and the last image “end-of-the-line” images. Basically, this removes the functionality of the right or left arrow when the user reaches the last or first image, respectively.

If you remove the functionality, then you’ll want to remove the visibility of that arrow. So let’s create a function that checks and changes the visibility of the arrows.

//this function checks the arrows
function checkArrows(i) {
if (i == 0) {
$('#leftArrow').css('display', 'none');
$('#rightArrow').css('display', 'inline');
} else if (i == images.length - 1) {
$('#rightArrow').css('display', 'none');
$('#leftArrow').css('display', 'inline');
} else {
$('#rightArrow').css('display', 'inline');
$('#leftArrow').css('display', 'inline');
}
}

The function receives the variable i (the image that the slideshow is moving to). Then we check three possibilities. If the new image is the first one (i=0), then we get rid of the left arrow, but make sure the right arrow is showing. If this isn’t true, we check to see if the new image is the last one (i == images.length-1). If it is, then we do the opposite with the arrows. Finally, if neither of these are true (image is somewhere in the middle), then we make sure both arrows are showing.

To complete this, we’ll call this function in the forwardImage() and backwardsImage() functions.

  //This function will move the slideshow backwards one
function backwardsImage() {
currentImageKey();
if (i == 0) {
//changeImage(images.length - 1);
} else {
changeImage(i - 1);
}
checkArrows(i-1);
}

//This function will move the slideshow forward one
function forwardImage() {
currentImageKey();
if (i &lt; images.length - 1) {
changeImage(i + 1);
} else {
//changeImage(0);
}
checkArrows(i+1) ;
}

Notice the checkArrows() function being called right before the closing braces of each function. Why plus 1 and minus 1? Remember, the variable i currently stands for the image showing. Then we change the image to a new image. But for the arrows, we need to know the new image’s ID, not the old one’s.

The jsFiddle:

Comments
  • Lee DuBose says:

    Thanks for the tuts. I like the way you started with a really simple example and built on that. I’ve worked through a number of otherwise good tuts that were hard to follow because the author crammed in a lot of bells and whistles, obscuring the essential code.
    One question. Since in this example we want the image to stay until the user decides to move on, is the beginNow = setInterval(forwardImage, 4000); line and the clearInterval(beginNow); lines in the arrow functions necessary? I took them out and everything seems to be working fine.
    P.S. Is that red hair is see in your avatar? As in a red fox? Do you ever metamorphose, you know, like on the weekends or something?

    • Kim Joy Fox says:

      Thanks Lee! And yes, those lines are not needed.
      And yes, but only during full moons.

  • Kamran Shafi says:

    Thanks Kim, for sharing this, your article allowed me to help someone 🙂

  • Anka says:

    Clean, Simple, Useful. Thank you, Kim!! I have a question though. Auto sliding stops once I click prev or next buttons. How do I resume autoplay? Thank you.