Click Transitions - prev and next

Rather than have transitions occur on a timer you can choose to have transitions occur in response to a click event. The prev and next options are used to identify the elements which should be the triggers for prev/next transitions. When used in conjuction with timeout = 0 the effect is a manual slideshow. The values for prev and next can be a DOM element or any valid jQuery selection string.

(Click on image for next slide)

$('#s1').cycle({
    fx:     'slideY',
    speed:  300,
    next:   '#s1',
    timeout: 0
});

Prev/Next

Prev Next

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

More Click Transitions - timeout and pager

You can combine an automatic slideshow (timeout-based) with manual controls by using a non-zero timeout value. The next slideshow (below, left) is setup to perform auto-transitions every 3 seconds, pause-on-hover, and perform a manual advance when the image is clicked.

The pager option is used for creating full navigation controls. This option instructs the plugin to create navigation elements, one for each slide, and add them to the container identified by the value of the pager option.

Manual and Auto Advance

(hover to pause, click to advance)

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

Pager

$('#s4')
.before('<div id="nav">')
.cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav'
});

When using the pager option, the generated navigation elements are simply anchors. So if you set the pager option like so:
pager: '#nav'
you can style the anchors like this:
#nav a { background-color: #fc0 }

In addition, the navigation element for the active slide is given the class activeSlide so that it can be styled uniquely.

The pager in the example above is styled like this:

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

Stopping a Slideshow

If you need to stop a running slideshow you can pass the string 'stop' to the cycle method.

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

Manually Pausing a Slideshow

If you need to pause/resume a running slideshow you can pass the string 'pause' or 'resume' to the cycle method.

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

Callbacks

Before and after callbacks are supported for each slide transition. Within the context of your callback method, this is the element that is transitioning in. The before option specifies the name of the callback function to be invoked immediately before a slide transition. The after option specifies the name of the callback method to be invoked at the end of a slide transition.

The before and after callback methods are passed three arguments:

the DOM element for the slide that is being transitioned in (same as this)
the DOM element for the slide that is being transitioned out
the options object

$('#s5').cycle({
    fx:     'scrollLeft',
    timeout: 5000,
    before:  onBefore,
    after:   onAfter
 });

Status area

The callbacks for the example above are implemented as follows:

function onBefore() {
    $('#output').html("Scrolling image:<br>" + this.src);
}
function onAfter() {
    $('#output').html("Scroll complete for:<br>" + this.src)
        .append('<h3>' + this.alt + '</h3>');
}

Non-Image Content

The examples thus far have all used image content. This was done for simplicity and because images demo very well. But there is no restriction on slide content. Your slides can contain whatever you wish.

St Andrews State Park - Panama City, FL

This park is one of the most popular outdoor recreation spots in Florida.

Located in the Florida panhandle, the 1,260 acre park is situated on a scenic peninsula and is well known for its sugar white sands and brilliant blue water.

The ocean provides opportunity for endless fun. From boogie boarding to snorkeling to swimming and boating, there is always something to do.

$('#s6').cycle({
    fx:     'scrollUp',
    timeout: 6000,
    delay:  -2000
});

1 There are tons of options you can use to control how and when your slide transitions occur. Test them out and see what ones you like. Check out the many examples on this website and see which ones catch your eye.

2 There are tons of options you can use to control how and when your slide transitions occur. Test them out and see what ones you like. Check out the many examples on this website and see which ones catch your eye.

3 There are tons of options you can use to control how and when your slide transitions occur. Test them out and see what ones you like. Check out the many examples on this website and see which ones catch your eye.

$('#s7').cycle({
    fx:    'scrollRight',
    delay: -1000
});

Next up: Advanced Demo (Part 1) ››

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

Download the Cycle Plugin