Arrows not showing up in slideshow, not able to control back and forth in 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

Try this with Cycle2 (new & improved version of Cycle).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Cycle2</title>
<!--helpf for older IE browsers-->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Cycle2 Slideshow Plugin-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
/**Slideshow**/
.cycle-slideshow {
width:400px; /**adjust width as required**/
margin: 0 auto;
text-align: center;
.cycle-slideshow img {max-width:100%}
/* prev / next links */
.cycle-prev, .cycle-next {
position: absolute;
top: 0;
width: 20%;
opacity: 0;
filter: alpha(opacity=0);
z-index: 800;
height: 100%;
cursor: pointer;
.cycle-prev {
left: 0;
background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
.cycle-next {
right: 0;
background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
.cycle-prev:hover, .cycle-next:hover {
opacity: .7;
filter: alpha(opacity=70)
/**END SLIDESHOW STYLES**/
</style>
</head>
<body>
<!--begin slideshow-->
<div class="cycle-slideshow"
    data-cycle-fx="fade"
    >
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<!--insert your images below-->
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="description">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="description">
<p>Mouse over image for previous / next links</p>
<!--end slideshow-->
</div>
</body>
</html>
Nancy O.