Slideshow - an example of a maintainable, unobtrusive JavaScript solution

A detailed explanation how to create a maintainable dynamic slide show in JavaScript

After a workshop in Singapore on the subject of DOM Scripting and Ajax I promised to explain one of the example scripts in more detail.

The example is the following slide show:

  • Hallway
  • Hob
  • Bathroom
  • Living Room
  • Bedroom

Granted, the outcome is not very flashy, but the idea of this is not to explain how to use an effect library, but how to approach an effect like this, keep it accessible, unobtrusive and allow future maintainers to change images, look and feel and text labels without having to change your script.

Without JavaScript, users will get the following:

  • Hallway
  • Hob
  • Bathroom
  • Living Room
  • Bedroom

Adding and removing or changing the order of images and adding captions can be easily done in the HTML and the final solution will not mean that the maintainer needs to know any JavaScript or search in the code where to change CSS classes, IDs or text labels.

Are you ready to spend some time going through this step by step?

Creative Commons License This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License. Written by Christian Heilmann, CSS based on the Yahoo! User Interface Library