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