You are encouraged to view the source of these demos to understand the power and flexibility the Cycle2 brings to the table.
- 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.