‹‹ cycle homejQuery Cycle Plugin - Intermediate Demos (Part 1)

Delaying the First Slide

The delay option lets you set the number of milliseconds to add to the timeout value for the first slide. This setting is useful when you have several slideshows on the same page because it provides a way to offset the transitions so they are not competing for the CPU. Because these demo pages contain numerous slideshows, the delay will be used frequently on these pages.

Easing

The Cycle Plugin supports easing during the transition animations if the Easing Plugin is included on the page. 

$('#s1').cycle({
    fx:     'zoom',
    easing: 'easeInBounce',
    delay:  -4000
});
 
$('#s2').cycle({
    fx:     'scrollDown',
    easing: 'easeOutBounce',
    delay:  -2000
});

Sync

The sync option controls whether the slide transitions occur simultaneously. The default is true which means that the current slide transitions out as the next slide transitions in. By setting the sync option to false you can get some interesting twists on your transitions. 

$('#s3').cycle({
    fx:    'zoom',
    sync:   0,
    delay: -4000
 });
 
$('#s4').cycle({
    fx:    'scrollDown',
    sync:   0,
    delay: -2000
});

Shuffles

The shuffle effect works out of the box as shown below (left). But if you need more control over this effect then you can define a shuffle property on the options object which specifies the shuffle coordinates. These coordinates identify where the slide should shuffle to. The default value is
{ top: 15, left: width of container } 

$('#s5').cycle({
    fx:    'shuffle',
    delay: -4000
});
 
$('#s6').cycle({
    fx:   'shuffle',
    shuffle: {
        top:  -230,
        left:  230
    },
    easing: 'easeInOutBack',
    delay: -2000
});

Things to Keep in Mind

- Effects that manipulate an element's width or height (slideX/slideY/turnLeft/turnRight/turnUp/turnDown) do not work with "backin" easing on IE. Avoid this combination of options.

Next up: Intermediate Demo (Part 2) ››