I need help with creating a slideshow that covers my webpage width 100% and height 500px. The image resolution is 1200*575. Can someone assist me with this?
CSS
#slide{
width : 100%;
height: 500px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IO-Hope</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.bcat.bgswitcher.js"></script>
<link rel="stylesheet" type="text/css" href="StyleHome.css">
</head>
<body>
<div id="slide">
</div>
<script class="slidecon" type="text/javascript">
var srcBgArray = ["./Img/Slide/1.jpg","./Img/Slide/2.jpg","./Img/Slide/3.jpg","./Img/Slide/4.jpg"];
$(document).ready(function() {
$('#slide').bcatBGSwitcher({
width :'100%' ,
height : 500 ,
urls: srcBgArray ,
effect : "fade",
interval : 5000,
loop : true,
shuffle : true,
links: true,
prevnext: true
});
});
</script>
</body>
</html>