I am trying to create a slideshow that cycles between a multitude of different <div>s and for some reason I cannot get the slideshow to work. I have done some research on it, and everything seems like it should be working. I have checked the linked .js filepaths over and over and I made sure my script tags are all in the correct place.
All that happens on my end is the three images show up in the browser window, one after another.
This is the code
<!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" />
<title>Lorena Gaxiola</title>
<style type="text/css">
body {background: #222; font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; margin:50px; color:#999}
ul li{line-height:20px;}
.new{margin-top:15px}
a{color:#fff; text-decoration:none; font-style:italic;}
a:hover{text-decoration:underline}
h1{font-size:16px; text-transform:uppercase; font-weight:normal; color:#fff; letter-spacing:1px;}
h2{font-size:12px; text-transform:uppercase; font-weight:normal; color:#999; letter-spacing:1px;}
#myslides img {height:500px; width:500px;}
</style>
<script type="text/javascript" src="jquery/jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'cover',
speed: 500,
timeout: 2000
});
});
</script>
</head>
<body>
<div id="myslides">
<div>
<img style="500px;" src="http://images2.fanpop.com/images/photos/5800000/happy-kitten-kittens-5890512-1600-1200.jpg" />
</div>
<div>
<img src="http://images5.fanpop.com/image/photos/31400000/cute-kitten-in-marshmallows-cute-kittens-31462498-1914-1762.png" />
</div>
<div>
<img src="http://images2.fanpop.com/image/photos/9900000/so-cute-3-cute-kittens-9989494-1098-960.jpg" />
</div>
</div>
</body>
</html>
The images right now are placeholders, and they need to be in <div>s so I can style them easier later. Does anybody know why I cannot get my slideshow to work?
First include jquery, then jquery cycle:
<script type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery/jquery.cycle.all.js"></script>
And it should work. Btw, <img style="500px;" should be changed, i guess you wanted to set width?