Programming a Slide Show

Result of Programming a Slide Show

One of the most frequent requests we get at LearnToProgram is to explain how to make a slideshow using HTML and Javascript. Programming a slideshow is fairly straightforward. In this tutorial I’ll provide you with all the code you need. You’re welcome to use this code, or modify it to your liking.

Just so you know where we’re headed, the final version of your slideshow will look like this:

Result of Programming a Slide Show

Notice the Next and Previous Buttons at the bottom of the screen. We simply used some public domain images and put them in the same folder as our .html document containing the basic document structure:

Our folder is set up like this:

Slide shot folder structure

Let’s start by adding a simple style element to our code. We’ll create a class called “center” which we will use to center our buttons in just a bit:

Next let’s take a look at the body of our document. Here we’ll place the image and buttons that will display and control the slideshow. You’ll notice that each button uses the onclick attribute to call Javascript functions prev() and next().

Next comes the Javascript which allows us to add the interactivity to our page. In the initial part of the Javascript we’ll initialize all of the variables. The variable “slideIndex” keeps track of which slide the user is viewing. The array “slideArray” instantiates an array of imageItems, which is a custom type. The imageItems stores the filename of each image.

All that’s left at this point is two helper functions that provide information about the image objects– imageItem() and getImageLoc()– and the next and previous functions which load a slide and display it for the user.

And finally, for your reference, the complete code for programming a slideshow.

1 Comment

  1. Very nice! Thanks for the example. Here are some items your editor missed:

    The last slideArray index should be 7, not 8.
    slideArray[8] = new imageItem(“img8.jpg”);
    slideArray[7] = new imageItem(“img8.jpg”);

    and the complete code, line 48 s/b if (slideIndex >= 7) {

Leave a Reply

Your email address will not be published.