‹‹ cycle homejQuery Cycle Plugin - Beginner Demos

1 - Define Your Markup and Styles

All of the examples on this page use the following markup and CSS: 

<div class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>

.pics { 
    height:  232px; 
    width:   232px; 
    padding: 0; 
    margin:  0; 
}

.pics img { 
    padding: 15px; 
    border:  1px solid #ccc; 
    background-color: #eee; 
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

2 - Choose an Effect

You can choose from any of the following named effects:

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.

- Remember that every child element of the container becomes a slide!

Next up: Intermediate Demo (Part 1) ››