I am working on stretching my JQuery slideshow to fit the entire browser, but I am running into some difficulty. I have downloaded the jQuery Vegas plugin, but I can't seem to figure out what the problem is. I would like my slideshow to resemble the one on www.dealix.com. Any help would be greatly appreciated!
<head>
<style type="text/css">
<!--
#fadein {
position:relative;
height:100%;
width:100%;
}
#fadein img {
position:absolute;
left:0;
top:0;
#vegas-loading {
border-radius: 10px;
background: #000;
background: rgba(0,0,0,0.7);
background: url(images/loading.gif) no-repeat center center; /* Loading Gif by http://preloaders.net/ */
height: 32px;
left: 20px;
position: fixed;
top: 20px;
width: 32px;
z-index: 0;
}
#vegas-overlay {
background: transparent url(overlays/01.png);
opacity: 0.5;
z-index: -1;
}
#vegas-background {
-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;
max-width: none !important; /* counteracts global img modification by twitter bootstrap library */
z-index: -2;
}
#vegas-overlay,
#vegas-background {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
-->
</style>
</head>
<body>
<div class="fadein">
<img src="images/slide.jpg">
<img src="images/slide1.jpg">
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas"></script>
<script src="JqueryPlugins/jquery.vegas.min"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
});
</script>
</body>