<!DOCTYPE html>
<!--
#######################################
- THE HEAD PART -
######################################
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>
<!-- 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="../examples&source/css/style.css" media="screen" />
<!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
<link rel="stylesheet" type="text/css" href="../examples&source/css/noneed.css" media="screen" />
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script type="text/javascript" src="../examples&source/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="../examples&source/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="../examples&source/rs-plugin/css/settings.css" media="screen" />
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
</head>
<style>
.tp-bullets.tp-thumbs .bullet { border:2px solid #999; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.tp-bullets.tp-thumbs .bullet.selected { border:2px solid #ff0000; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
</style>
<!--
#######################################
- THE BODY PART -
######################################
-->
<body>
<!-- HEADER -->
<header>
<section class="container">
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
<div style="clear:both"></div>
</section>
</header> <!-- END OF HEADER -->
<article class="boxedcontainer">
<!-- EXAMPLE 2 -->
<div style="margin-bottom:80px">
<div class="tp-banner-container">
<div id="slider1" class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="../examples&source/images/bg2.jpg">
<!-- MAIN IMAGE -->
<img src="../examples&source/images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="../examples&source/images/bg1.jpg">
<!-- MAIN IMAGE -->
<img src="../examples&source/images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700" data-thumb="../examples&source/images/bg4.jpg">
<!-- MAIN IMAGE -->
<img src="../examples&source/images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="5" data-masterspeed="700"data-thumb="../examples&source/images/bg3.jpg" >
<!-- MAIN IMAGE -->
<img src="../examples&source/images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
</li>
</ul>
</div>
</div>
</div>
<!-- THE SCRIPT INITIALISATION -->
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
<script type="text/javascript">
jQuery(document).ready(function() {
var revapi = jQuery('#slider1').revolution(
{
delay:4000,
startwidth:1170,
startheight:500,
hideThumbs:0,
thumbWidth:100,
thumbHeight:50,
thumbAmount:4,
navigationType:"thumb",
navigationArrows:"none",
navigationStyle:"round",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:-80,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"bottom",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:20,
soloArrowRightHalign:"right",
soloArrowRightValign:"bottom",
soloArrowRightHOffset:20,
soloArrowRightVOffset:20,
touchenabled:"on",
onHoverStop:"on"
});
jQuery('.thumb').click(function() {
setTimeout(function() {
revapi.revpause();
},500);
return true;
})
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</article><!-- Content End -->
</body>