# SLIDER REVOLUTION - The Responsive Slider Plugin

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
- 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.
- 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.
- 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>