Im new to jquery and web design. i need help ASAP.

Im new to jquery and web design. i need help ASAP.

Hello, I'm casey , I am trying to build an image slider using jquery and the cycle plugin but my slider won't work. I don't know coding but dreamweaver has been great with helping me through that. Please I would paste my code so someone can tell me what I did wrong and how to resolve it. Thank you very much.


<!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>Feathers Store</title>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
    fx:     'scrollHorz',
    speed:  'slow',
    
    next:   '#next',
    prev:   '#prev'
});
</script>
<style type="text/css">
<!--
#wrapper {
 width: 100%;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
}
#slider {
 display: block;
 float: left;
 height: 500px;
 width: 1170px;
 overflow: hidden;
 position: absolute;
}
#header {
 background-color: #000;
 height: 50px;
 margin-right: 0px;
 margin-left: 0px;
}
#content {
 height: auto;
 width: 1170px;
 margin-right: auto;
 margin-left: auto;
}
#footer {
 height: 100px;
 width: 1170px;
 margin-right: auto;
 margin-left: auto;
}
#slidecase {
 display: block;
 float: left;
 height: 500px;
 width: 1170px;
 overflow: auto;
}
#next {
 background-image: url(Images/right-arrow.png);
 background-repeat: no-repeat;
 background-position: center center;
 display: block;
 float: right;
 height: 500px;
 width: 24px;
 position: relative;
 z-index: 99;
 cursor: pointer;
}
#prev {
 background-image: url(Images/left-arrow.png);
 background-repeat: no-repeat;
 background-position: center center;
 display: block;
 float: left;
 height: 500px;
 width: 24px;
 position: relative;
 z-index: 99;
 cursor: pointer;
}
-->
</style>
</head>

<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="content">
    <div id="slidecase">
     <div class="controller" id="next"></div>
        <div id="slider">
        <img src="Images/slider1.jpg" width="1170" height="500" alt="Slide 1" />
        <img src="Images/slider2.jpg" width="1170" height="500" alt="Slide 2" />
        <img src="Images/slider3.jpg" width="1170" height="500" alt="Slide 3" />
        </div>
        <div class="controller" id="prev"></div>
    </div>
  </div>
  <div id="footer">Content for  id "footer" Goes Here</div>
</div>

</body>
</html>