You specify the effect name by either passing a string to the cycle method or
by using an options object and setting the fx property
to the name of the desired effect.

$('#s1').cycle('fade');

$('#s2').cycle({
fx: 'scrollDown'
});

3 - Choose Speed and Timeout Values

Next you may want to choose speed and timeout values to control how fast and how often the
slide transitions occur. The speed option defines the number of milliseconds it
will take to transition from one slide to the next. The timeout option
specifies how many milliseconds will elapse between the start of each transition.

$('#s3').cycle({
fx: 'fade',
speed: 2500
});

$('#s4').cycle({
fx: 'scrollDown',
speed: 300,
timeout: 2000
});

4 - Choose Other Options

There are many other options to choose from. Two that you may find useful are
pause and random. The pause option causes
the slideshow to pause when the mouse hovers over the slide.
The random option causes the slides to be shown in
random order, rather than sequential.

$('#s5').cycle({
fx: 'fade',
pause: 1
});

$('#s6').cycle({
fx: 'scrollDown',
random: 1
});

Things to Keep in Mind

- CSS Rules! When building your slideshows, remember that animation effects work best
when both the container and slide have a fixed box.