If you are new here, we would recommend to go through our Previews in the Examples Folder (i.e. Home Slider Boxed ) first,
and than check our Special Examples in the Guides&More Folder (i.e. How To build a Boxed Slider).
Once you seen our Examples and Guides, and you still have some questions, take a look on the DOCUMENTATION
Copy the rs-plugin folder into the same directory where you find your html document.
Copy the style.css file into your css folder, or copy the content of the style.css file it into your style sheet
<!-- 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" />
<!-- ################################# - 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>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10
});
});
</script>
Please feel free to visit us at CODECANYON, check out again our ONLINE PREVIEWS or follow us below.
Facebook
Twitter
Support