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

- Faster
  &
  More
  Powerful
  Slider Revolution is the highly acclaimed
  slide-based displaying solution, thousands of
  businesses, theme developers and everyday
  people use and love!
  1000's
  Of Happy Users
  Rekord Breaking
  Sales on CodeCanyon
  A Professional Solution
  4.7/5 Stars
  Customer Rating
- Caption Selection
  Custom Animation Editor
  With Live Preview
  With Style Preview
  Big
  Improvements
- Design
  &
  Create
  With Total Layer Control
- Timelined Captions
  Create Custom Animations
  with our Brand-New
  Transition Builder
- Extensive Video Support
  Youtube
  Vimeo
  Self-Hosted HTML 5
  Next Slide: Full Screen Video

## How to build a Slider ?

### Copy To the Header:

    		<!-- 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.plugins.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" />

### Create in the Document some Slider Markups like here:

    	<!--
    	#################################
    		- 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="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="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>

### Initialise the Plugin somewhere in the Body Footer:

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