• 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
  • newslide2014_1
    INTRODUCING
     
    BRAND NEW FEATURES
    animate
     
    CHARACTERS
    SINGLE WORDS
    LINES
    Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam.
  • newslide2014_1
    INTRODUCING
     
    BRAND NEW FEATURES
    animate
     
    CHARACTERS
    SINGLE WORDS
    LINES
    Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam.
  • 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="../examples/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/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>