Creating a Slick Auto-Playing Featured Content Slider

I love the Coda Slider plugin for jQuery. I’ve used it recently to build a couple of tabbed “widgets”. One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose.

Both of these examples use the Coda Slider pretty much “out of the box”. Sure the design was heavily altered to fit the job, but the actual functionality wasn’t altered in any way. I recently had the calling to build a “featured content area”. The Coda Slider fit the bill almost perfectly, but it needed a little functionality surgery to do what I wanted it to do. Special thanks to Benjamin Sterling for helping me out and figuring out some quirks for me.

View Demo Download Files

Functionality Checklist

Like I said, the Coda Slider was 90% there already. There is a main content area (panels, if you will), which slide from left to right each with different unique content. There is generally a set number of panels, but the code is written in such a way that adding or removing panels isn’t a huge pain. There are links which act as navigation to quickly jump to any particular panel. These links can be anything (text hyperlink, thumbnail, etc) and link to a unique hash value URL (each panel has a unique URL if need be). Coda Slider provides all of this out of the box.

Here is what we need in addition:

Different types of custom content in the panels. We can already put whatever we want in the panels, but to make it easier on ourselves, there will be a couple of different formats ready to go. The main one being an image the size of the entire panel, but featuring a text-overlay.
Auto-play. You can still click the thumbnails to jump to any panel, but left onto itself, the slider will slowly cycle through the panels.
Arrow indicator. To serve as a visual indication of which panel you are currently viewing, a small arrow will display above the thumbnail pointing into the panel.