Arrows not showing up in slideshow, cant control slideshow

Question

So I have a slideshow that is on one of my pages and the arrows on the two sides will not appear.  Before the pictures all load I can see the arrows behind the pictures but once they the arrows end up behind the pictures.  The pictures rotate normaly through the slideshow but I want people to be able to control if they want to go back and forth.  Here is my code for the slideshow.
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
          $('#slider').cycle({
    fx:     'scrollHorz',
    speed:  'slow',
          timeout: 3000,
    next:   '#next',
    prev:   '#prev'
</script>
<meta name="keywords" content="LADC Companies,commercial lawn service, services, snow removal, concrete romval, Home Depot, Kohl's">
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#NavBar {
          height: 36px;
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          margin-top: 102px;
          margin-bottom: 146px;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
          position: absolute;
          left: auto;
          top: auto;
          right: auto;
          bottom: auto;
.titleservices {
          background-color: #30C;
          height: 50px;
          width: 700px;
          border: medium solid #000;
          margin-top: 176px;
          margin-left: 130px;
          position: absolute;
h1 {
          margin-top: 182px;
          margin-left: 160px;
          position: absolute;
          font-size: 36px;
          color: #FFF;
          font-weight: bold;
          font-variant: normal;
          text-transform: uppercase;
.leftside {
          background-color: #03F;
          height: 400px;
          width: 300px;
          border: medium solid #000;
          margin-top: 250px;
          margin-left: 50px;
          position: absolute;
          opacity: 0.75;
          filter: alpha(opacity=75);
.rightside {
          background-color: #03F;
          height: 400px;
          width: 300px;
          border: medium solid #000;
          margin-top: 250px;
          margin-left: 600px;
          position: absolute;
          opacity: 0.75;
          filter: alpha(opacity=75);
.background {
          background-color: #FFF;
          height: 912px;
          width: 244px;
          margin-top: 250px;
          margin-left: 356px;
          position: absolute;
          opacity: 0.30;
          filter: alpha(opacity=30);
.background2 {
          background-color: #FFF;
          height: 506px;
          width: 905px;
          margin-top: 656px;
          margin-left: 26px;
          position: absolute;
          opacity: 0.30;
          filter: alpha(opacity=30);
p1 {
          margin-top: 265px;
          margin-left: 55px;
          margin-right: 609px;
          position: absolute;
          font-size: 22px;
          color: #FFF;
          font-variant: normal;
          text-align: center;
          font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
p2 {
          margin-top: 265px;
          margin-left: 605px;
          margin-right: 60px;
          position: absolute;
          font-size: 21px;
          color: #FFF;
          font-variant: normal;
          text-align: center;
          font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
#apDiv1 {
          position: absolute;
          width: 222px;
          height: 165px;
          z-index: 1;
          left: 366px;
          top: 267px;
          border: thin solid #00F;
#wrapper {
          display: block;
          height: 483px;
          width: 879px;
          margin-top: 670px;
          margin-right: 41px;
          margin-left: 37px;
          position: absolute;
#slider {
          display: block;
          float: left;
          height: 483px;
          width: 879px;
          margin-top: 670px;
          margin-right: 41px;
          margin-left: 37px;
          overflow: hidden;
          position: absolute;
          left: -39px;
          top: -671px;
          border: medium solid #000;
#prev {
          background-image: url(Images/leftArrow.png);
          background-repeat: no-repeat;
          background-position: center center;
          display: block;
          float: left;
          height: 483px;
          width: 80px;
          position: relative;
          z-index: 10;
#next {
          background-image: url(Images/rightArrow.png);
          background-repeat: no-repeat;
          background-position: center center;
          display: block;
          float: right;
          height: 483px;
          width: 80px;
          position: relative;
          z-index: 10;
#contain {
          overflow: auto;
#apDiv2 {
          position: absolute;
          width: 222px;
          height: 165px;
          z-index: 1;
          border: thin solid #00F;
          left: 365px;
          top: 465px;
#apDiv3 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 1;
          left: 48px;
          top: 671px;
</style>
Here is the slideshow part of my code
<div id="wrapper">
  <div id="contain">
    <div class="controller" id="prev"></div>
              <div id="slider">
                         <img src="Images/IMG_2418 2.JPG" width="879" height="483" />
                  <img src="Images/IMG_2447 2.JPG" width="879" height="483" />
                  <img src="Images/IMG_2453 2.JPG" width="879" height="483" />       
                  <img src="Images/IMG_2603 2.JPG" width="879" height="483" />       
                           <img src="Images/IMG_2711 2.JPG" width="879" height="483" />                                                                       <img src="Images/IMG_2822 2.jpg" width="879" height="483" />                            
                  <img src="Images/IMG_2839 2.JPG" width="879" height="483" />                            
                  <img src="Images/IMG_2313 3.JPG" width="879" height="483" />                            
                  <img src="Images/IMG_2460 2.JPG" width="879" height="483" />                            
                  <img src="Images/IMG_2430 2.JPG" width="879" height="483" />                            
                  <img src="Images/DSC_0318.JPG" width="879" height="483" />
        </div>
    <div class="controller" id="next"></div>
  </div>
</div>
</div>
</body>
</html>

Answer 1

Pretty sure this is just a duplicate of this one: http://forums.adobe.com/thread/1310212?tstart=0