Cycle2 - versatile slideshow plugin

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.

Highlights:

• Supports all browsers
• Declarative: no scripting needed!
• Responsive: fully control your slideshow via css (resize this page to see!)
• Customizable: per-slide option overrides
• Extensible: fully customizable API (on a per-slideshow basis if you wish)
• Smart: supports image loading and delayed initialization
• Smarter: supports progressive image loading
• Out-of-the-box functionality for pagers, captions, overlays, and prev/next controls
• Support for swipe gesture on mobile devices
• Fade, scroll, shuffle, tile and carousel transitions
• Bookmarkable slides
• And lots more!

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

How it Works

It's very simple really, even your grandmother could use it. It goes like this:

• Include jQuery and the Cycle2 plugin on your page.
• Declare your slideshow markup as shown in the numerous demos.
• Sit back and enjoy your slideshow while sipping a cool beverage.

Need more details? Ok, here's the deal: Cycle2 provides a plugin function calledcycle. That function is invoked on a container element. Each image in the container becomes a "slide". Options control how and when the slides are transitioned. But here's the thing... you don't have to call cycle and pass your options. You declare your options as attributes on the slideshow element and Cycle2 grabs them from there.

What's that you say? You'd rather set your options via script than in the markup? Ok fine, have it your way. You don't have to declare your options in the markup (but it's fun!), you can invoke cycle from your own code and pass your options in the old-fashioned way. You can even grab hold of the API object and inject your own implementation of any of the API methods that you choose.

Example

 All that is needed is to include jQuery and the Cycle2 plugin using script tags like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

markup like this:

<div class="cycle-slideshow">
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>

The Javascript

$( '.mySlideshows' ).cycle();

Options

Options are set on the slideshow element using data-cycle-option-name attributes. The option name is always lowercase and prefixed with data-cycle-. For example, to set the speedand manual-speed options you would do this:

<div class="cycle-slideshow" data-cycle-speed="600" data-cycle-manual-speed="100"> ...

This is the preferred method of setting slideshow options as it greatly reduces (or eliminates) the need for custom initialize script.

Options can also be set programatically if you prefer, by passing an options hash to the cycle method. When setting options programmically the option name does not contain thedata-cycle- prefix and the string is camelCased on hyphens:

$('.cycle-slideshow').cycle({
    speed: 600,
    manualSpeed: 100
});

All options can be declared with data-cycle-* attributes on the container element and will be inherited by all slides.

Options in the table below that have a • symbol can be overridden on individual slide elements in order to have specific properties for specific slides.

data-cycle-auto-height="600:400"

$.fn.cycle.defaults.autoSelector = '.mySlideshows';

Commands

Commands are issued to slideshows by invoking cycle on the container element and passing it a string argument, which is the command name.

var newSlide = '<img src="pic.jpg">';
$('.cycle-slideshow').cycle('add', newSlide);

$('.cycle-slideshow').cycle('destroy');

// goto 3rd slide
$('.cycle-slideshow').cycle('goto', 2);

$('.cycle-slideshow').cycle('next');

$('.cycle-slideshow').cycle('pause');

$('.cycle-slideshow').cycle('prev');

$('.cycle-slideshow').cycle('reinit');

// remove 2nd slide
$('.cycle-slideshow').cycle('remove', 1);

$('.cycle-slideshow').cycle('resume');

$('.cycle-slideshow').cycle('stop');

Declarative Commands

It is possible to issue commands declaratively by using the data-cycle-cmd attribute. You can use this attribute on any element and Cycle2 will use event delegation to issue a cycle command when the element is clicked. For example, to have a random button element pause your slideshow you can do this:

<button data-cycle-cmd="pause">Pause</button>

When the above button is clicked, Cycle2 will auto-generate and run this code for you:

$('.cycle-slideshow').cycle('pause');

To specify a specific slideshow as the target of the command, use the data-cycle-context attribute and set its value to a selector string that identifies the desired slideshow:

<button data-cycle-cmd="pause" data-cycle-context="#mySlideshow">Pause</button>

When the above button is clicked, Cycle2 will auto-generate and run this code for you:

$('#mySlideshow').cycle('pause');

And finally, you can pass an argument to the cycle command using the data-cycle-arg attribute. For example, to remove the first slide in a slideshow:

<button data-cycle-cmd="remove" data-cycle-context="#mySlideshow" data-cycle-arg="0">Remove Slide</button>

Events

Cycle2 emits numerous events as a slideshow runs and you can bind to these events in order to further customize or augment the slideshow's behavior.

All cycle events are triggered on the slideshow element and so can be bound using code like:

$( '#mySlideshow' ).on( 'cycle-eventname', function( event, opts ) {
    // your event handler code here
    // argument opts is the slideshow's option hash
});

function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag)

function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag)

function(event, optionHash, API)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash)

function(event, jQueryWrappedSlideEl)

function(event, indexOfSlideRemoved, removedSlideEl)

function(event, optionHash)

function(event, optionHash)

function(event, optionHash, slideOptionsHash, currentSlideEl)

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.