Get Started

07.14.2015Krisztian

Introduction

Slider Revolution is an All-Purpose Slide Displaying Solution that allows for showing almost any kind of content.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!

Slider Revolution requires jQuery 1.9.1 or higher.Slider Revolution also requeires a modern browser with full Javascript and HTML5 support. Slider Revolution has been tested in and full suppoirts following browsers:

Latest Chrome (desktop and mobile)
Latest Firefox
Latest Safari (desktop and mobile)
Latest Opera(webkit)
Internet Explorer 11

What Files do i need to upload to my server?

Please upload the <strong>revolution</strong> folder to your server. In this folder you will find the following subfolders containing all of the items content:

assets
css
fonts
js

If your Slider Revolution is placed in a different folder, don’t forget to change the file paths in the upcoming examples !

Install Slider Revolution

To install Slider Revolution, place the following code between the <head></head> tags:

<!-- RS5.0 Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="revolution/css/settings.css">

<!-- RS5.0 Layers and Navigation Styles -->
<link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
<link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">	

<!-- RS5.0 Core JS Files -->
<script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js?rev=5.0"></script>
<script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js?rev=5.0"></script>

The Slider Markup

The Slider will always fit within the wrapping container with its Width, and will auto set the height. We recommend to give an Unique ID (in our example below we used id=”slider1″) for each Slider you embed into your Document, which will allow to reference on the Slider via its API and Initialisation Scripts later.

Avoid spacing, paddings, margin on ul, li elements within the slider, and in case you use Global styling on html tags, you should make sure that they are not negatively influence the slider content.

The following example will create two slides, with one single layer on each slide, and simple fade effects as slide transitions.

A simple sliders Markup could look like this:

<!-- START REVOLUTION SLIDER 5.0 -->
<div class="rev_slider_wrapper">
 <div id="slider1" class="rev_slider"  data-version="5.0">
  <ul>		
   <li data-transition="fade">			
     <!-- MAIN IMAGE -->
     <img src="images/slide1.jpg"  alt=""  width="1920" height="1280">							
     <!-- LAYER NR. 1 -->
     <div class="tp-caption News-Title" 							
        data-x="left" data-hoffset="80" 
        data-y="top" data-voffset="450" 							
        data-whitespace="normal"
        data-transform_idle="o:1;"			
        data-transform_in="o:0" 
        data-transform_out="o:0" 							 
        data-start="500">DISCOVER THE WILD</div>
   </li>

   <li data-transition="fade">			
     <!-- MAIN IMAGE -->
     <img src="images/slide1.jpg"  alt=""  width="1920" height="1280">							
     <!-- LAYER NR. 1 -->
     <div class="tp-caption News-Title" 							
        data-x="left" data-hoffset="80" 
        data-y="top" data-voffset="450" 							
        data-whitespace="normal"
        data-transform_idle="o:1;"			
        data-transform_in="o:0" 
        data-transform_out="o:0" 							 
        data-start="500">DISCOVER THE WILD</div>
   </li>
  </ul>				
 </div><!-- END REVOLUTION SLIDER -->
</div><!-- END OF SLIDER WRAPPER -->

<ul>

<div class="tp-caption News-Title"

data-x="left" data-hoffset="80"

data-y="top" data-voffset="450"

data-whitespace="normal"

data-transform_idle="o:1;"

data-transform_in="o:0"

data-transform_out="o:0"

data-start="500">DISCOVER THE WILD</div>

</li>

<div class="tp-caption News-Title"

data-x="left" data-hoffset="80"

data-y="top" data-voffset="450"

data-whitespace="normal"

data-transform_idle="o:1;"

data-transform_in="o:0"

data-transform_out="o:0"

data-start="500">DISCOVER THE WILD</div>

</li>

</ul>

</div>

</div>

Initialising the Slider

Finally, you need to place the Calling jQuery script in the Footer to initialise the Slider on your Content. Revolution Slider 5.0 delivers you over 170+ Options you can set via the Initialisation rutine, and over a few hundred options and settings due the Content Markups. In our documentation you will find detailed examples and descriptions of all possible settings and options. In this following example we call the slider with minimal settings relying on the Slider Default settings.


<script>	
jQuery(document).ready(function() {		
   jQuery("#slider1").revolution({
      sliderType:"standard",
      sliderLayout:"auto",
      delay:9000,
      navigation: {
          arrows:{enable:true}				
      },			
      gridwidth:1230,
      gridheight:720		
    });		
});	
</script>

jQuery(document).ready(function() {

jQuery("#slider1").revolution({

sliderType:"standard",

sliderLayout:"auto",

delay:9000,

navigation: {

arrows:{enable:true}

gridwidth:1230,

gridheight:720

});