The Jquery Slideshow will not work

The Jquery Slideshow will not work

I'm building my first Responsive Web Design project, I added a simple slide show using jQuery on the front page. However, when I test the page, the show does not show up. 

Here is the link, html, and css code


  2.  <div class="hero-unit">
  3.     <ul id="s3sliderContent">
  4.         <li class="s3sliderImage">
  5.         <img src="slideshow/images/cisco-access-point.jpg" alt="merakibanner">
  6.         <span class="left"><strong>100% Cloud Managed Networking</strong>Cloud services are becoming the norm due to its robust and affordable technology. Meraki delivers the top-notch services by cutting the cost of long term maintenance<br />
  7.         <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
  8.         </li>
  9.         
  10.         <li class="s3sliderImage">
  11.         <img src="slideshow/images/webdesign.jpg" alt="webbanner">
  12.         <span class="left"><h1>Professional Web Design & Development</h1>Rodriguez Studios would like to help your company or business to succed by presenting to your customers a professional looking website<br /><p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
  13.         </li>
  14.         
  15.         
  16.         <li class="s3sliderImage">
  17.         <img src="slideshow/images/facebook-reseller-cover-photo.jpg" alt="wifibanner">
  18.        <a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
  19.        </li>
  20.         
  21.         
  22.         <div class="clear s3sliderImage"></div>
  23.         </ul>
  24.       </div><!--end of slider unit-->


  2. .hero-unit {
  3.   padding-top: 0px;
  4.   padding-right: 0px;
  5.   padding-bottom:0px;
  6.   padding-left:0px;
  7.   margin-bottom: 0px;
  8.   font-size: 18px;
  9.   font-weight: 200;
  10.   line-height: 30px;
  11.   color: inherit;
  12.   background-color: #eeeeee;
  13.   -webkit-border-radius: 0px;
  14.      -moz-border-radius: 0px;
  15.           border-radius: 6px;
  16. }

  18. .hero-unit h1 {
  19.   margin-bottom: 0;
  20.   font-size: 60px;
  21.   line-height: 1;
  22.   letter-spacing: -1px;
  23.   color: inherit;
  24. }

  26. .hero-unit li {
  27.   line-height: 30px;
  28. }

  30. #s3slider {
  31. width: 836px; /* important to be same as image width */
  32. height: 244px; /* important to be same as image height */
  33. position: absolute; /* important */
  34. overflow: hidden; /* important */
  35. margin: 300px 0 0 206px;
  36. left: 211px;
  37. }
  38.  
  39. #s3sliderContent {
  40.     width: 836px; /* important to be same as image width or wider */
  41.     position: absolute; /* important */
  42.     top: 0; /* important */
  43.     margin-left: 0; /* important */
  44. }
  45.  
  46. .s3sliderImage {
  47.     float: left; /* important */
  48.     position: relative; /* important */
  49.     display: none; /* important */
  50. }
  51.  
  52. .s3sliderImage span {
  53.     position: absolute; /* important */
  54.     left: 0;
  55.     font: 12px/15px Arial, Helvetica, sans-serif;
  56.     padding: 10px 13px;
  57.     width: 836px;
  58.     background-color: #85a3b3;
  59.     filter: alpha(opacity=70); /* here you can set the opacity of box with text */
  60.     -moz-opacity: 0.7; /* here you can set the opacity of box with text */
  61.     -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
  62.     opacity: 0.7; /* here you can set the opacity of box with text */
  63.     color: #fff;
  64.     display: none; /* important */
  65.    
  66. }

  68. .left {
  69. top: 0;
  70.     left: 0;
  71. width: 180px !important;
  72. height: 280px;
  73. } 



  77. .clear {
  78.     clear: both;
  79. }

  81. .sliderImage span strong {
  82.     font-size: 14px;
  83. }
Please help, thanks in advanced!