The last thing developers need today is another jQuery and/or CSS3 based content slider or carousel. I think the problems with these types of modules have been well documented.
About a year ago, however, I wrote a step-by-step tutorial for Issue #203 of Web Designer Mag that involved creating a “news content switcher”. I’ve been meaning to revisit, tweak, and release the code for that here and so I finally got around to it.
This module, like the original in the magazine, is responsive and uses CSS3 for animation. What I find is more practical about this one (compared to the usual carousels and whatnot) is the fact that there’s no mystery as to what’s coming next; all the news items are clearly on display.
The content that shows in the preview (the image and description) is really incidental. That is, it’s not necessary to the readability and/or scannability of the module’s content, so I think it’s much more usable than other content sliders and switchers. In this way it’s a little more like a tab switcher, which has visible and clear options, rather than mystery items sliding in by surprise.
It’s not a jQuery plugin, it’s just a plug-and-play script with simple editable markup. This is because, other than speed and auto-rotating, I couldn’t find many significant “options” to include. Those two options are very easy to change in the code by reading the code comments.
Also, if you want different colors, the styles in the CSS file can be changed easily to accommodate any context.
I’m sure this has a few weaknesses (like accessibility; the clickable news headlines are not using anchors — is that bad?), so I’m glad to look at suggestions for improvements. You can view it on GitHub or use the links below to download and view a demo.