I am attempting to build a slideshow for a website. I found a JQuery based one and attempted to integrate it into my site, and for the most part, I have. However when the page is first loaded, the image is displayed to the right. When it cycles to the next image, it is displayed in the center.
Here is the HTML source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" />
<link href="static/css/bootstrap-theme.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="shortcut icon" href="./static/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="./static/images/favicon.ico" type="image/x-icon"> <meta http- equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slideshow</title><!-- -->
<link rel="stylesheet" href="static/css/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="nav-home" href="./index.html" class="navbar-brand">Home</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li id="nav-resume"><a id="link" href="resume.html">Resume</a></li>
<li id="nav-projects"><a id="link" href="portfolio.php">Portfolio</a></li>
<li id="nav-contact"><a id="link" href="contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
</header>
<div id="wrap">
<div class="container">
<!--container is ended in footer tag.-->
<div align="center">
<h1>Portfolio</h1>
<div id="myslides"><img src="static/images/carousel/test1.jpg"/><img src="static/images/carousel/test2.jpg"/><img src="static/images/carousel/test3.jpg"/></div> </div>
</div>
</div>
<!-- Includes -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="static/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="static/js/jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fit: 1, pause: 1, timeout: 1000
});
});
</script>
</body>
</html>
the url to the live site is: [url no longer active]
