Guest User

Slider Revolution instructions

a guest
Feb 19th, 2014
471
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. Copy To the Header:
  2. <!-- get jQuery from the google apis -->
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
  4.  
  5. <!-- CSS STYLE-->
  6. <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
  7.  
  8. <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
  9. <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
  10. <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
  11.  
  12. <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
  13. <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
  14.        
  15. Create in the Document some Slider Markups like here:
  16. <!--
  17. #################################
  18.     - THEMEPUNCH BANNER -
  19. #################################
  20. -->
  21. <div class="tp-banner-container">
  22.     <div class="tp-banner" >
  23.         <ul>
  24.             <!-- SLIDE  -->
  25.             <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
  26.                 <!-- MAIN IMAGE -->
  27.                 <img src="images/slidebg1.jpg"  alt="slidebg1"  data-bgfit="cover" ata-bgposition="left top" data-bgrepeat="no-repeat">
  28.                 <!-- LAYERS -->
  29.                 <!-- LAYER NR. 1 -->
  30.                 <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
  31.                     data-x="85"
  32.                     data-y="224"
  33.                     data-speed="500"
  34.                     data-start="1200"
  35.                     data-easing="Power4.easeOut">My Caption
  36.                 </div>
  37.                 ...
  38.                 </li>
  39.             <!-- SLIDE  -->
  40.             <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
  41.                 <!-- MAIN IMAGE -->
  42.                 <img src="images/darkblurbg.jpg"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
  43.                 <!-- LAYERS -->
  44.                 <!-- LAYER NR. 1 -->
  45.                 <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
  46.                     data-x="85"
  47.                     data-y="224"
  48.                     data-speed="500"
  49.                     data-start="1200"
  50.                     data-easing="Power4.easeOut">My Caption
  51.                 </div>
  52.                 ...
  53.             </li>
  54.                 ....
  55.         </ul>
  56.     </div>
  57. </div>
  58.      
  59. Initialise the Plugin somewhere in the Body Footer:
  60. <script type="text/javascript">
  61.     jQuery(document).ready(function() {
  62.        jQuery('.tp-banner').revolution(
  63.         {
  64.             delay:9000,
  65.             startwidth:1170,
  66.             startheight:500,
  67.             hideThumbs:10
  68.         });
  69.     });
  70. </script>
RAW Paste Data