Slide options

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)


Element options

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.
example:  data-in="left":the element will start right side of the slider and move left till its at the target location
example: 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 data-step=”0″.


<p data-position="10,50" data-step="0">I start first</p>
<p data-position="10,50" data-step="0">me to</p>
<a data-position="10,50" data-step="1">I start when both paragraphs are finished</a>



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)


<p data-position="10,50"></p>
   I will transition out when the second p transition starts
<p data-position="10,50"></p>
   data-step="1" data-special="cycle" data-delay="1000"&gt;
   I will transition out when the third p transition starts
<p data-position="10,50"></p>
   data-step="1" data-special="cycle" data-delay="2000"&gt;
   I m the third p