jquery cycle examples

jquery cycle plugin is the best plugin I have found for slide show. Its very lightweight and very easy to configure. In this blog we are going to learn few basic things and quick and easy examples.

First we need jQuery Library and cyble plugin. Either you download them or include them using following scripts.

%MINIFYHTML1bacd62c21afb53c31fe3daa54138f5f5%%MINIFYHTML1bacd62c21afb53c31fe3daa54138f5f6%%MINIFYHTML1bacd62c21afb53c31fe3daa54138f5f7%

JQuery Cycle Plugin – Basic Example 1



JQuery Cycle Plugin - Basic Example 1%MINIFYHTML1bacd62c21afb53c31fe3daa54138f5f31%%MINIFYHTML1bacd62c21afb53c31fe3daa54138f5f8%%MINIFYHTML1bacd62c21afb53c31fe3daa54138f5f9%%MINIFYHTML1bacd62c21afb53c31fe3daa54138f5f10%

	

JQuery Cycle Plugin – Basic Example 2
All the examples mentioned bellow using following HTML code and CSS style.

HTML Code as follows

CSS Style used as follows

 /* width and height css style for Images */
.pics {
    height:  232px;
    width:   232px;
    padding: 0;
    margin:  0;
}
 /* css style added for slider Images */
.pics img {
    padding: 15px;
    border:  1px solid #ccc;
    background-color: #eee;
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

Now lets see what all different type of Effect you can Choose and apply.

    * blindX
    * blindY
    * blindZ
    * cover
    * curtainX
    * curtainY
    * fade
    * fadeZoom
    * growX
    * growY
    * scrollUp
    * scrollDown
    * scrollLeft
    * scrollRight
    * scrollHorz
    * scrollVert
    * shuffle
    * slideX
    * slideY
    * toss
    * turnUp
    * turnDown
    * turnLeft
    * turnRight
    * uncover
    * wipe
    * zoom

There are two ways we can apply the effect to the cycle method.
Method 1: Specify the effect name by either passing a string to the cycle

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

Method 2: Using an options object and setting the fx property to the name of the desired effect.

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

Now lets move to little advance on how to choose Speed and Timeout Values. You can see the speed and timeout variable set in following example.

Speed : defines the number of milliseconds it will take to transition from one slide to the next.
Timeout: specifies how many milliseconds will elapse between the start of each transition.

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

Let me know if you want me to write more examples for you.

Njoy slides :)

Share this nice post:

3 thoughts on “jquery cycle examples

  1. HI,
    I have been spinning my wheels for more than 1 hr. I’ve been surfing for answers and all say the same thing. That is, the codes they show are exactly what I have. I am just trying a simple shuffle effect using cycle 2. It only does the default fadein/out. It does not do the shuffle.

    Here are my plugins

    Here is HTML:

    Here is javascript:
    \$\(‘.test’).cycle({
    fx: ‘shuffle’,
    shuffle: {top:15, left:200},
    delay: -4000
    });

    Please help me. I am really frustrated. I am supposed to finish my assignment by tomorrow.

    Thanks for your help
    Gerry

  2. Terrific work! This is the level of information that ought to
    be shared throughout the web. Disgrace on the search engines for
    now not positioning this submit upper! Occur over and talk over with
    my internet site . Thanks a lot =)

Comments are closed.