Revolution Slider

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>

Initialise the Plugin somewhere in the Body Footer:

<script type="text/javascript">

	var revapi;

	jQuery(document).ready(function() {

		   revapi = jQuery('.tp-banner').revolution(
			{
				delay:9000,
				startwidth:1170,
				startheight:500,
				hideThumbs:10

			});

	});	//ready

</script>