jquery cycle plugin advance examples

For basic please refer jquery cycle examples.

When I came across this plugin and simple example first thing came to my minde that how to add “previous and Next” Button in slide show, so lets do it. I am using same HTML Code & CSS style used in “JQuery Cycle Plugin – Basic Example 2”. Please refer that so that you can understand.

CSS Style for previous and Next buttona long with configuration.

Example 1: jQuery cycle plugin previous and Next links for slider.

$('#slide1').cycle({
    fx:     'fade',
    speed:  'fast',
    timeout: 0,
    next:   '#next',
    prev:   '#prev'
});

Example 2: jQuery cycle plugin auto rotation. hover to pause, click to see next image.

$('#slide1').cycle({
    fx:     'fade',
    speed:   300,
    timeout: 3000,
    next:   '#s3',
    pause:   1
});

Example 3: jQuery cycle plugin – show numeric pagination.

$('#slide1')
.before('

Quick Tips

/* How to stop slide show  */
$('#slideshow').cycle('stop');
/* How to pause slide show  */
$('#slideshow').cycle('pause');
Share this nice post:

2 thoughts on “jquery cycle plugin advance examples

Leave a Reply

Your email address will not be published. Required fields are marked *