# SLIDER REVOLUTION - The Responsive Slider Plugin

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

- Left Top
  Center Top
  Right Top
  Left Center
  Center Center
  Right Center
  Left Bottom
  Center Bottom
  Right Bottom
- Left Top (x+50, y+100)
  Center Top (x-50, y+40)
  Right Top (x-90, y+20)
  Left Center (x+30, y-20)
  Center Center (x-30,y+20)
  Right Center (x-50, y-40)
  Left Bottom (x+15,y-20)
  Center Bottom (y-10)
  Right Bottom (x-30, y-30)
- TRY THE
  CAPTION ANIMATION
  BUILDER BELOW
  GO AND GIVE A TRY
- CREATE AWESOME ANIMATIONS

## How to Align Captions ?

Each Caption is positioned via Absolute Position relative to the left/top corner of the Grid. The Grid is the Caption holder. It can but must not be the same size as the Slider itself. Since fullwidth and fullscreen slider can have a higher width or height dimension then the caption Grid itself. Still you can help yourself and position the captions on the center or bottom / right positions in the Grid. For this take a look on the following Settings in the Captions

In case you wish to force the Aligns go to the real corners of the Slide and break the Grid size, you can do this via some special options. See example: 04B.Sample-AlignForce.html

### Caption at Center Center

    			<div class="tp-caption medium_bg_asbestos lft"
    				data-x="center"
    				data-y="center"
    				data-hoffset="0"
    				data-voffset="0"
    				data-speed="800"
    				data-start="3300"
    				data-easing="Power4.easeOut"
    				data-endspeed="300"
    				data-endeasing="Power1.easeIn"
    				data-captionhidden="off"
    				style="z-index: 6">Center Center
    			</div>

To move vertical or horizontal the caption from that aligned position, you can use the hoffset and voffset settings

### Center Center with -30px in the horizontal and +20px in the vertical direction

    			<div class="tp-caption medium_bg_asbestos lft"
    				data-x="center"
    				data-y="center"
    				data-hoffset="-30"
    				data-voffset="20"
    				data-speed="800"
    				data-start="3300"
    				data-easing="Power4.easeOut"
    				data-endspeed="300"
    				data-endeasing="Power1.easeIn"
    				data-captionhidden="off"
    				style="z-index: 6">Center Center
    			</div>

In case you set the data-x and data-y with a value (not like center, right or vertical top, center, bottom) the captions will be aligned to the left top corner.

### Left Top (default) Align, and simple positions

    			<div class="tp-caption medium_bg_asbestos lft"
    				data-x="250"
    				data-y="180"
    				data-speed="800"
    				data-start="3300"
    				data-easing="Power4.easeOut"
    				data-endspeed="300"
    				data-endeasing="Power1.easeIn"
    				data-captionhidden="off"
    				style="z-index: 6">Center Center
    			</div>