In the past months, I’ve been working for a great organization called GroundSpark, which works through film and media to combat homophobia, bullying, and sexism, as well as other social justice issues. Most of the work I’ve been doing has been on their website, and today I finished piecing together a new slideshow for the homepage.
The jQuery library along with the excellent jQuery Cycle plugin do the heavy lifting. The Cycle plugin is more often used with a set of images, but it will also work on an HTML content panel with whatever CSS-styled elements you want in it.
Two tips for using the plugin: the Cycle script has to be called after the page elements it acts on are rendered by the browser, so sticking it down by the bottom of the document helps with that.
Also, to prevent a flash of un-jQuery’d content (in this case a long list of content panes) wrap the slideshow in a container element of the same size with the overflow hidden with CSS.