# SLIDER REVOLUTION - The Responsive Slider Plugin

## The Simple Animations handled via Classes:

- BASIC CAPTION
  ANIMATIONS
  FADE
  SHORT FROM LEFT (sfl)
  SKEW FROM LEFT (skewfromleft)
  SHORT FROM TOP (sft)
  LONG FROM TOP (lft)
  SHORT FROM RIGHT (sfr)
  SKEW FROM RIGHT (skewfromright)
  SHORT FROM BOTTOM (sfb)
  LONG FROM BOTTOM (lfb)
  RANDOM ROTATE (randomrotate)
  LONG FROM RIGHT (lfr)
  LONG FROM LEFT (lfl)
- BASIC CAPTION
  ANIMATIONS
  FADE
  SHORT FROM LEFT (sfl)
  SKEW FROM LEFT (skewfromleft)
  SHORT FROM TOP (sft)
  LONG FROM TOP (lft)
  SHORT FROM RIGHT (sfr)
  SKEW FROM RIGHT (skewfromright)
  SHORT FROM BOTTOM (sfb)
  LONG FROM BOTTOM (lfb)
  RANDOM ROTATE (randomrotate)
  LONG FROM RIGHT (lfr)
  LONG FROM LEFT (lfl)

## The Custom Animations (available via the customin and customout classes) Creator:

## Custom Caption Animation Builder random

LAYER EXAMPLE
In Animation Editor (Click to Collapse/Expand)

Speed & Easing
Speed: | ms | Easing: |  |  | Split: |  | Speed: | ms

Transition
X: | px | Y: | px | Z: | px |  |  |

Rotation
X: | ° | Y: | ° | Z: | ° |  |  |

Scale | Skew
X: | % | Y: | % | X: | ° | Y: | ° |

Opacity | Perspective | Origin
0-100: | % | 300-1600: | px | X: | % | Y: | % |

Out Animation Editor (Click to Collapse/Expand)

Speed & Easing
Speed: | ms | Easing: |  |  | Split: |  | Speed: | ms

Transition
X: | px | Y: | px | Z: | px |  |  |

Rotation
X: | ° | Y: | ° | Z: | ° |  |  |

Scale | Skew
X: | % | Y: | % | X: | ° | Y: | ° |

Opacity | Perspective | Origin
0-100: | % | 300-1200: | px | X: | % | Y: | % |

## Result of Custom IN/OUT Animations

    <div class="tp-caption customin customout"
    	data-x="center"
    	data-y="center"

    	data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    	data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"

    	data-start="1000"
    	data-speed="500"
    	data-easing="Power3.easeIn"

    	data-splitin="None"
    	data-elementdelay="100"

    	data-end="1500"
    	data-endspeed="500"
    	data-endeasing="Power3.easeIn"

    	data-splitout="None"
    	data-endelementdelay="100"

    	>LAYER EXAMPLE
    </div>

## How to use it?

Simple copy the Result div above as a new layer under your <li> Slide container. You can add some further Classes for Styling the Caption (see all style in the settings.css file)

In case you have already some Caption and you only wish to have a differen transition than the Basic Caption Transitions (see Documentation for full list) you can simple copy the data- customin,customout,speed,easing,endspeed and endeasing parameters. Dont forget to set to your caption a position via data-x and data-y and set the start and endtime for tha animatiosn !