Build a Hulu Content Slider with jQuery Cycle &  CSS3

Hulu.com has a stylish, fully-featured content slider on it’s homepage that was built using Flash. I set out to re-create this using HTML, CSS3, JavaScript and jQuery. Here are the results.

See the slideshow source in action!

Requirements

1. Slide left to right, and seamlessly restart at the beginning from the last slide
2. Slide the full width of the viewport like Hulu, even after a browser resize event
3. A paged, or paginated, navigation to browse through slides
4. A next and previous icons as an alternative navigation method
5. Unobtrusive and easy to maintain
6. Handle any number of slides
7. Modular, extensible codebase that can easily and quickly be modified for re-use
8. Semantic in structure, and search engine friendly

HTML

Each element marked with a class of slide will be included in the rotation. Each slide is relatively positioned to allow for easy customization using absolute positioning inside of this relative DIV. My demonstration contains simple linked images, but you could add whatever you would like by targeting the unique identifiers for each slide or by adding your own re-usable classes to the mix (.video, .featured, etc.)

I’ve used the box-shadow, rgba() and border-radius CSS3 properties to visually enhance the design. If a browser doesn’t support these the design will gracefully degrade.JavaScript/jQuery

I’ve built this using the jQuery Cycle slideshow plugin because its well-supported and provides a great framework to build upon and customize as needed. You’ll need to download and a copy of the full (labeled “all”) jQuery Cycle plugin and include it in the HEAD section of your document after jQuery and before the following code.

See the slideshow source in action!

Browser Support & Resources

I’ve included Photoshop CS5 source files for the slideshow items and next and previous sprites just in case anyone wants them.

This has been cross browser tested for quality in:

• Firefox 3.6
• Google Chrome 9
• Safari 5
• Internet Explorer 8

If you have any suggestions, recommendations or requests please let me know by posting a comment!

Updates

I’ve just added an additional callback function to hide the previous arrow on the first slide, and the next arrow on the last slide. This has been included in the demo and code above.