Its possible to set slide transition effects individually for every slide
type of the in-animation (default is none)
possible values: fade, none ,left, right, top, bottom, scrollLeft, scrollRight, scrollTop, scrollBottom
none lets the slide just appear/disappear.
You also can set a default value for the transition (see Plugin option reference)
You can control many aspects of the animation for each html-element individually. Just use the following data-attributes on the element.
The Element won´t be animated and will be visible from the beginning of the slide (no value is needed)
position of the element inside the slider. Format: “top,left” in pixels
data-in / data-out
type of the in-animation/out-animation (default is left)
possible values: fade, none ,left, topLeft, bottomLeft, right, topRight, bottomRight, top, bottom
none lets the element just appear/disappear at the desired location
the direction-type values define the direction in which the element is animated.
data-in="left":the element will start right side of the slider and move left till its at the target location
data-out="left": the element will move left till its out of the slider
data-ease-in / data-ease-out
easing for the animations (you can use all in jquery-ui contained easing methods)
data-speed removed in 0.8.0
time in ms the in-animation takes
time after which the elements animation is complete. It will start at the beginning of the slide/step, or after its specificed delay
time in ms before the in transition starts (in the current step / see steps)
You can group your elements in different steps. All animation of one step will start at the same time (maybe with your choosen element-specific
data-delay). Elements of the next step will not start before the previous step is finished. If an element has no
data-step attribute the plugin will thread it as having
The only value currently available for data-special is cycle.
cycle will trigger the out transition for the previous element in the current step.
(remember to use
data-delay for elements with cycle, or they will start at the same time the element to cycle starts – that will break the whole fun)
I will transition out when the second p transition starts
data-step="1" data-special="cycle" data-delay="1000">
I will transition out when the third p transition starts
data-step="1" data-special="cycle" data-delay="2000">
I m the third p