SHARE
TWEET

Slider Revolution instructions

a guest Feb 19th, 2014 444 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top