Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest.
See Cycle 2 in action on Malsup.com
http://jquery.malsup.com/cycle2/
Demos / Demonstrations
Getting Started How to get started with simple, basic slideshows.
Adding Slides How to add slides to a running slideshow.
Auto Height How to leverage Cycle2's auto-height support.
- Bookmarkable Slides How to leverage Cycle2's data-cycle-hash attribute to have bookmarkable slides.
- Captions How to add captions to your slideshow. From simple to advanced.
- Carousel Pager Two synchronized slideshows using a carousel pager and prev/next anchors.
- Centered Slides How to center slides horizontally and vertically (using Cycle2's center plugin).
- Commands How to issue commands to a running slideshow and how to bind arbitary elements to issue those commands (pause, resume, stop, goto, etc).
- Continuous How to have a continuously moving slideshow.
- Image Loader How to use Cycle2's image loading facilities in order to delay the start of a slideshow until some or all images have been loaded.
- Manual Fx How to override the default transition effect when the transition is initiated through user interaction (as apposed to a timer).
- Nested Slideshows How to have a slideshow of slideshows (inception!)
- Non-Image Slides How to use elements other than images as slideshow slides. This includes how to wrap images in anchors so that they can be links and how to build slides from several elements.
- Overlays How to add information overlays to your slideshow.
- Pagers How to add pagers to your slideshow. From simple to advanced.
- Pause-On-Hover How to pause a slideshow when the mouse moves over it and how to identify other elements to trigger this behavior.
- Prev/Next Controls How to use prev/next controls to advance a slideshow forward and back.
- Progress Bar How to listen to cycle events in order to display a slideshow progressbar.
- Progressive Image Loading How to use Cycle2's progressive image loading facilities to minimize bandwidth and load images as needed.
- Swipe Gesture How to use a swipe gesture to trigger slide changes on touch devices.
- Synchronized Slideshows How to synchronized multiple slideshows to transition sequentially.
- Template Customization How to customize Cycle2's template syntax.
- Transition: Carousel Examples of the Carousel transition effect.
- Transition: Flip Examples of the CSS3 Flip transition effects.
- Transition: Shuffle Examples of the Shuffle transition effect.
- Transition: Tile Examples of the Tile transition effects.
- YouTube An example of displaying YouTube videos in slideshow.