Your website might have some cool pictures that you want to show on your opening page. If it's just one or two, you'd just put them on there as fixed images, but sometimes you have more than that. Rather than choose just the best one, you might arrange to have all of them shown, one at a time, in what's called a slideshow or carousel. With a slideshow, the user has to click to advance the slides.

As with many of our JavaScript applications, there are many examples, plugins and tutorials on the web that do the job. Our implementation is simpler and less sophisticated than those, but we think it's good enough.

Slideshow Example

This will just be a small example, with just four slides. Click on the left or right side of the image to move the slideshow forward or back. Mouse over the image to show the arrows.

  • Harry Potter
  • Ron Weasley
  • Hermione Granger
  • Draco Malfoy

How It's done

Use view source on this page to see exactly how we did it.

See the reading on slideshows for more explanation.