SLIDER REVOLUTION - The Responsive Slider Plugin

Welcome and thank you for purchasing Slider Revolution !

If you are new here, we would recommend you to go through our demo setups in the Examples Folder (i.e. Home Slider Boxed ) first,
and then check our special examples in the Guides & More folder (i.e. How to build a Boxed Slider).

Where is the Documentation ?

You already went through our examples and guides, and still have questions? Take a look at the Documentation

I would like a simple quick start. What do i need to do ?

1
Copy the slider files into your Project Folder

Copy the rs-plugin folder into the same directory where you find your html document.

Copy the style.css file into your css folder, or copy the content of the style.css file it into your style sheet

2
This goes into your site's Header Section:

		<!-- get jQuery from the google apis -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

		<!-- CSS STYLE-->
		<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

		<!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
		<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>
		<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

		<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
		<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

3
Add the slider markup to your HTML Document:

	<!--
	#################################
		- THEMEPUNCH BANNER -
	#################################
	-->
	<div class="tp-banner-container">
		<div class="tp-banner" >
			<ul>
				<!-- SLIDE  -->
				<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
					<!-- MAIN IMAGE -->
					<img src="../examples&source/images/slidebg1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
					<!-- LAYERS -->
					<!-- LAYER NR. 1 -->
					<div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
						data-x="85"
						data-y="224"
						data-speed="500"
						data-start="1200"
						data-easing="Power4.easeOut">My Caption
					</div>
					...

				</li>
				<!-- SLIDE  -->
				<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
					<!-- MAIN IMAGE -->
					<img src="../examples&source/images/darkblurbg.jpg"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
					<!-- LAYERS -->
					<!-- LAYER NR. 1 -->
					<div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
						data-x="85"
						data-y="224"
						data-speed="500"
						data-start="1200"
						data-easing="Power4.easeOut">My Caption
					</div>
					...
				</li>
				....
			</ul>
		</div>
	</div>

4
Initialise the plugin somewhere in the Footer Section:

	  	<script type="text/javascript">
				jQuery(document).ready(function() {
					   jQuery('.tp-banner').revolution(
						{
							delay:9000,
							startwidth:1170,
							startheight:500,
							hideThumbs:10
						});
				});
			</script>