01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16
  • slidebg1
    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
  • darkblurbg
    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
  • videobg1
    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>